Tanstack/react-query v5 - 使或重新获取非活动查询

Question

我正在使用 Tanstack/react-query v5.12.2，我需要使用 useQueryClient() 使非活动查询无效或重新获取，但我认为 v5 中发生了一些变化。我什至将类型设置为“非活动”或“全部”，但它不起作用。 当启用属性为“true”时，它可以工作，但我需要将启用设置为假。 有什么想法吗？

示例.tsx

import { useQuery, useQueryClient } from '@tanstack/react-query';
export function Example() {
  const qc = useQueryClient();
  const { isLoading, error, data } = useQuery({
    queryKey: 'repoData',
    queryFn: () => {
      return fetch(
        'https://api.github.com/repos/tannerlinsley/react-query'
      ).then((res) => res.json());
    },
    enabled: false,
  });

  if (!data) {
    return (
      <button
        type="button"
        onClick={() =>
          qc.resetQueries({ queryKey: 'repoData', type: 'inactive' })
        }
      >
        Click to refetch all queries
      </button>
    );
  }

  if (isLoading) return 'Loading...';

  if (error) return 'An error has occurred: ' + error.message;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{' '}
      <strong>✨ {data.stargazers_count}</strong>{' '}
      <strong>🍴 {data.forks_count}</strong>
    </div>
  );
}

应用程序.tsx

import './App.css';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Example } from './Example';

const queryClient = new QueryClient();
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  );
}

export default App;

我用 v4 试过了，没问题，但在 v5 中就不行了。

Answer 1

你需要这样做：

queryClient.invalidateQueries({
    queryKey: ["Your-Key"],
    refetchType: "all"//here you can specify "active", "inactive" or "all"
});

https://tanstack.com/query/v5/docs/reference/QueryClient/#queryclientinvalidatequeries