useQuery

Phillmont MuktarAI Engineer

Implement a useQuery hook that manages a promise resolution which can be used to fetch data.

export default function Component({ param }) {
  const request = useQuery(async () => {
    const response = await getDataFromServer(param);
    return response.data;
  }, [param]);

  return (
    <div>
      {request.loading && <p>Loading...</p>}
      {request.error && <p>Error: {request.error.message}</p>}
      {request.data && <p>Data: {request.data}</p>}
    </div>
  );
}

Arguments

fn: () => Promise: A function that returns a promise
deps: DependencyList: An array of dependencies, similar to the second argument of useEffect. Unlike useEffect, this defaults to []

Returns

The hook returns an object that has different properties depending on the state of the promise.

Pending:
- status: 'loading': The promise is still pending
Rejected:
- status: 'error': The promise was rejected
- error: Error: The error that caused the promise to be rejected
Fulfilled:
- status: 'success': The promise was resolved
- data: The data resolved by the promise returned by fn

useQuery (Official Solution)

Phillmont MuktarAI Engineer

Solution

The useQuery hook can be implemented with useEffect to begin the promise resolution and update the states accordingly.

The challenge here is to realize that promise resolutions are asynchronous from React updates, so there is a possibility of race conditions when the dependencies change before a pending promise is resolved.

To prevent this, we can use an ignore flag to ignore the promise resolution if it is no longer relevant (e.g. deps have changed, the component has been unmounted). The ignore is initialized within the function's closure; each time useEffect runs, the function has its own ignore instance variable and can refer to it when the promise is resolved and it has to decide whether to use the results.

This approach is well-documented in the React documentation.

import { DependencyList, useEffect, useState } from 'react';

type AsyncState<T> =
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: Error };

export default function useQuery<T>(
  fn: () => Promise<T>,
  deps: DependencyList = [],
): AsyncState<T> {
  const [state, setState] = useState<AsyncState<T>>({
    status: 'loading',
  });

  useEffect(() => {
    let ignore = false;

    setState({ status: 'loading' });

    fn()
      .then((data) => {
        if (ignore) {
          return;
        }

        setState({ status: 'success', data });
      })
      .catch((error) => {
        if (ignore) {
          return;
        }

        setState({ status: 'error', error });
      });

    return () => {
      ignore = true;
    };
  }, deps);

  return state;
}

You must be signed in to view your submissions

Sign in

Create an account