...
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> ) } |
...