react-query - 如何在多個組件中訪問我的查詢？

Question

我剛從反應查詢開始，並使用它在我的 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中，您只需使用匹配鍵（ books ）調用useQuery ， 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");