React-query - 如何在多个组件中访问我的查询？

Question

我刚刚开始使用 React 查询，并使用它在 ListBooks 组件中使用 useQuery 从服务器获取书籍列表

const { data, error, isLoading, isError } = useQuery("books", getAllBooks);

如何访问任何其他组件中的图书列表？

我已经像这样设置了 QueryClientProvider ：

 const queryCache = new QueryCache({
  onError: (error) => {
    console.log(error);
  },
});

const queryClient = new QueryClient({ queryCache });

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <ThemeProvider theme={preset}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </ThemeProvider>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

我正在寻找 Redux 中 useSelector 的等效项来访问 redux 存储中的数据。

Answer 1

react-query根据查询键管理查询缓存，因此在另一个组件中，只要将它们都包装在里面QueryClientProvider，您只需useQuery使用匹配的键（books）进行调用，react-query就会为您返回适当的数据。

如果您在多个位置使用相同的查询，请考虑添加包装器挂钩以保持代码整洁：

function useAllBooks() {
  return useQuery("books", getAllBooks)
}

function Component1() {
  const {...} = useAllBooks()
  return (...)
}

function Component2() {
  const {...} = useAllBooks()
  return (...)
}

Answer 2

useGetFetchQuery您可以使用自定义挂钩和useQueryClient进行访问

import { useQueryClient } from "react-query";

export const useGetFetchQuery = (key) => {
    const queryClient = useQueryClient();

    return queryClient.getQueryData(key);
};

在组件中就这样写

const data = useGetFetchQuery("key from useQuery or useMutation");

UPD

正确地注意到@Tony Tai Nguyen与新（v5）版本的react-query查询键应该是一个数组。

const data = useGetFetchQuery(["query key"]);