所有查询的相同功能 onSuccess react-query

Question

我有一个用例，我想在全局范围内为所有突变和查询运行相同的函数onSuccess，而不必为每个单独的查询设置相同的函数（我有很多查询）

我有一堆这样的查询

const q1 = useQuery(
  "q1",
  async () => {
    return await axios
      .get(`/some/path`)
      .then((res) => res.data)
      .catch((e) => CustomError(e));
  },
  {
    onSuccess: () => generic(),
  }
);

const q2 = useQuery(
  "q2",
  async () => {
    return await axios
      .get(`/some/path`)
      .then((res) => res.data)
      .catch((e) => CustomError(e));
  },
  {
    onSuccess: () => generic(),
  }
);

const q1 = useQuery(
  "q3",
  async () => {
    return await axios
      .get(`/some/path`)
      .then((res) => res.data)
      .catch((e) => CustomError(e));
  },
  {
    onSuccess: () => generic()
  }
);

function generic() {
    return "should be set globally and run on ever OnSuccess event"
}

但是，我想为所有查询全局设置这个，像这样

const queryCache = new QueryClient({
  defaultConfig: {
    queries: {
      onSuccess: () => {
        return "should be set globally and run on ever OnSuccess event";
      },
    },
  },
});

const q1 = useQuery("q1", async () => {
  return await axios
    .get(`/some/path`)
    .then((res) => res.data)
    .catch((e) => CustomError(e));
});

const q2 = useQuery("q2", async () => {
  return await axios
    .get(`/some/path`)
    .then((res) => res.data)
    .catch((e) => CustomError(e));
});

const q1 = useQuery("q3", async () => {
  return await axios
    .get(`/some/path`)
    .then((res) => res.data)
    .catch((e) => CustomError(e));
});

我已经为此类功能搜索了大约一个小时的文档，但找不到任何东西

Answer 1

我能够找到如何为我的用例解决这个问题，这是一个使用 setDefaultOptions 设置 OnSuccess 函数的案例。

原来是这段代码

const queryCache = new QueryClient({
  defaultConfig: {
    queries: {
      onSuccess: () => {
        return "should be set globally and run on ever OnSuccess event";
      },
    },
  },
});

没有做任何事情，而是通过函数设置默认值

const queryCache = new QueryClient();

queryCache.setDefaultOptions({
  queries: {
    refetchOnWindowFocus: false,
    onSuccess: () => console.log("Got IM!"),
  },
});

每次我调用我的 API 时都会触发 console.log("Got Im!") onSuccess，这是我的用例的预期结果。

我可以看到 const queryCache = new QueryClient(); 确实有一个使用 defaultOptions 的构造函数，但是无论出于何种原因，它们都没有设置。

编辑

结果证明它确实可以将它传递给构造函数，它只是这个代码是在使用旧版本的 react-query 时编写的，当键是 defaultConfig 而不是 defaultOptions。此代码也有效（以及上面的解决方案）

const queryCache = new QueryClient({
  defaultOptions: {
    queries: {
      onSuccess: () => console.log("Got IM!"),
    },
  },
});

Answer 2

有一个针对该确切用例的公开 PR：https://github.com/tannerlinsley/react-query/pull/2404

它增加了对 queryCache 进行全局 onSuccess 回调的可能性。