...
Redux. Transform and place all data returned by the APIs into a global application store.
React Context.Transform and place all data returned by the APIs into component-based context.
React State.Transform and place all data returned by the APIs into component-based state.
Composition.
Blend of all the above.
Historically, using Redux came with a fair amount of repetitive boilerplate that would make working with it a bit cumbersome, though many of the concerns around boilerplate were mitigated through the use of @reduxjs/toolkit
.
...
Code Block | ||
---|---|---|
| ||
import { QueryClient, QueryClientProvider, } from '@tanstack/react-query' const queryClient = new QueryClient({ queries: { retry: falsetrue, // optional: you may disable automatic query retries for all queries or on a per-query basis. }, }) export default function App() { return ( <QueryClientProvider client={queryClient}> <Example /> </QueryClientProvider> ) } |
...
Code Block | ||
---|---|---|
| ||
function Example() { const { isLoading, isFetching, isInitialLoading, error, data } = useQuery({ queryKey: ['repoData'], queryFn: () => // Example API call with `fetch` return fetch('https://api.github.com/repos/tannerlinsley/react-query').then( (res) => res.json(), ), // Example API call with `getAuthenticatedHttpClient` return getAuthenticatedHttpClient().get(...); }) 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> ) } |
...
Tanstack Query: https://tanstack.com/query/latest
Tanstack React Query Overview: https://tanstack.com/query/v4/docs/react/overview
TkDodo’s Blog about React Query (very insightful): https://tanstack.com/query/latest/docs/react/community/tkdodos-blog
Installation: https://tanstack.com/query/v4/docs/react/installation
Quick start: https://tanstack.com/query/v4/docs/react/quick-start
Important defaults: https://tanstack.com/query/v4/docs/react/guides/important-defaults
Query Keys: https://tanstack.com/query/v4/docs/react/guides/query-keys
Query Key Factory: https://tanstack.com/query/latest/docs/react/community/lukemorales-query-key-factory
@tanstack/eslint-plugin-query
: https://tanstack.com/query/latest/docs/react/eslint/eslint-plugin-queryDoes
@tanstack/react-query
replace Redux? https://tanstack.com/query/latest/docs/react/guides/does-this-replace-client-state
Open edX-specific