Learning Lab Notes

React Query (Tanstack)

library

https://tanstack.com/query/latest

installation

Versions < 4 don’t require the @tanstack prefix

npm i @tanstack/react-query @tanstack/react-query-devtools

setup

  • wrap provider at highest use level (probably around <App/>)
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

<QueryClientProvider client={queryClient}>
  <App />
</QueryClientProvider>

devtools

import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

added next to <App />

<QueryClientProvider client={queryClient}>
  <App />
  <ReactQueryDevtools />
</QueryClientProvider>

usage

  • useQuery to get, useMutation to post
import { useQuery, useMutation } from "@tanstack/react-query";

useQuery()

@params

{
  queryKey: ["key"],
  queryFn: () => Promise,
}

useMutation()

@params

{
  mutationFn: () => Promise,
}