Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Redux. Transform and place all data returned by the APIs into a global application store.

  2. React Context.Transform and place all data returned by the APIs into component-based context.

  3. React State.Transform and place all data returned by the APIs into component-based state.

  4. Composition.

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

...

Open edX-specific

  • Prior art in code:

    • frontend-app-learner-portal-enterprise

      • useCheckSubsidyAccessPolicyRedeemability (source)

        • Uses useQuery.

      • useStatefulEnroll (source)

        • Uses useQuery and useMutation as dependent queries.

      • useRedemptionStatus (source)

        • Uses queryClient.invalidateQueries()