global-configuration.zh.mdx

全局配置

QueryClientProvider 可以为所有的 Quaere hook 提供全局配置 (选项)。

const queryClient = createQueryClient({
    queries: {
      // query options
    },
    mutations: {
      // mutation options
    }
})

<QueryClientProvider client={queryClient}>
  <Component />
</QueryClientProvider>

在以下示例中，所有的 Quaere hook 都将使用提供的相同的 refetchInterval，默认每 3 秒刷新一次：

import { useQuery, createQueryClient, QueryClientProvider } from "quaere";

function Dashboard() {
  const { data: events } = useQuery({ query: eventsQuery });
  const { data: projects } = useQuery({ query: projectsQuery });
  const { data: user } = useQuery({
    query: userQuery,
    // override
    refetchInterval: false,
  });

  // ...
}

const queryClient = createQueryClient({
  queries: {
    refetchInterval: 3000,
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Dashboard />
    </QueryClientProvider>
  );
}

访问全局配置 [#access-to-global-configurations]

你可以使用 getDefaultOptions 函数来访问全局配置或使用 queryClient 与缓存交互：

import { useQueryClient } from "quaere";

function Component() {
  const queryClient = useQueryClient();

  console.log(queryClient.getDefaultOptions());

  // ...
}