全局配置

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>
  );
}

访问全局配置

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

import { useQueryClient } from "quaere";
 
function Component() {
  const queryClient = useQueryClient();
 
  console.log(queryClient.getDefaultOptions());
 
  // ...
}

API 数据请求