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基于query keys来管理查询缓存，所以在其他组件中，只要把它们都包裹在QueryClientProvider里面，你只需要调用[=14] =] 使用匹配的键 (books)，react-query 将为您 return 适当的数据。

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

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

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

react-query - How can I access my queries in multiple components?

javascript

reactjs