React Data Fetching Pattern - Part V

#react #reactquery #api

This article is a continuation of:

Click here to access the Github repo for the code examples discussed below.

React Query

An alternative React data fetching library that provides similar utilities as SWR is React Query.

React Query provides a hook called useQuery which accepts a query key and a callback function (fetcher). Similar to SWR, it also allows for integration with React Suspense API by simply including the option suspense: true. If the fetcher callback requires a parameter (eg: URL), we can include this as a 2nd item in the array after the query key. useQuery will return data, isLoading, error, isError to be accessed by React components.

To allow for code reusability and avoid prop-drilling, we can create a custom hook to perform the logic of data fetching using React Query, as below.

const fetcher = async(apiURL:string) => {
    try {
      const {results: data} = await getUsers(apiURL)
      return data.map((user:UserApi) => ({
          id: user.id.value,
          firstName: user.name.first,
          lastName: user.name.last,
          username: user.login.username,
          email: user.email,  
      }))
    } catch(error) {
      throw new Error('unable to fetch data')
    }
}

const useUsers = () => {
    const {isLoading, isError, data, error} = useQuery(['users',apiURL], () => fetcher(apiURL),{suspense: true})

    return ({
        users: data,
        isLoading,
        isError,
        error
    })
}

export default useUsers;

Before we can access the data in any React component, we have to wrap the QueryClientProvider around the top-level component (<App />).

import { QueryClientProvider, QueryClient } from 'react-query';

const queryClient = new QueryClient()

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
);

Within React component, we can now access the users state from useUsers hook, as below.

export default function CardList() {
  const {users} = useUsers()

  return (
    <div className="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 justify-center grid-cols-1 mt-8">
      <Suspense fallback={<Loading />}>
        {
          users.map((user:User) => (<CardItem key={user.id} user={user}/>))
        }
      </Suspense>
    </div>
  )
}