Skip to main content

React Query

Start: Custom Hook Example​

Installation​

npm install @tanstack/react-query

index.html​

...
<script src="/node_modules/@tanstack/react-query/build/modern/index.js"></script>
...

Complete: Example​

const baseUrl = 'http://localhost:3000';
const url = `${baseUrl}/photos?_page=1&_limit=10`;

const {
  useQuery,
  useMutation,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} = ReactQuery;

function translateStatusToErrorMessage(status) {
  switch (status) {
    case 401:
      return 'Please login again.';
    case 403:
      return 'You do not have permission to view the photos.';
    default:
      return 'There was an error retrieving the photos. Please try again.';
  }
}

function checkStatus(response) {
  if (response.ok) {
    return response;
  } else {
    const httpErrorInfo = {
      status: response.status,
      statusText: response.statusText,
      url: response.url,
    };
    console.log(
      `logging http details for debugging: ${JSON.stringify(httpErrorInfo)}`
    );

    let errorMessage = translateStatusToErrorMessage(httpErrorInfo.status);
    throw new Error(errorMessage);
  }
}

function parseJSON(response) {
  return response.json();
}

function delay(ms) {
  return function (x) {
    return new Promise((resolve) => setTimeout(() => resolve(x), ms));
  };
}

const photoAPI = {
  getAll(page = 1, limit = 100) {
    return (
      fetch(`${url}?_page=${page}&_limit=${limit}`)
        // .then(delay(600))
        .then(checkStatus)
        .then(parseJSON)
        .catch((error) => {
          let errorMessage = translateStatusToErrorMessage(error);
          throw new Error(errorMessage);
        })
    );
  },
};

function usePhotos() {
  const queryInfo = useQuery({
    queryKey: ['photos'],
    queryFn: photoAPI.getAll,
  });
  console.log(queryInfo);
  return queryInfo;
  // const [loading, setLoading] = React.useState(false);
  // const [photos, setPhotos] = React.useState([]);
  // const [error, setError] = React.useState(null);

  // React.useEffect(() => {
  //   setLoading(true);
  //   setError(null);

  //   photoAPI
  //     .getAll(1)
  //     .then(data => {
  //       setPhotos(data);
  //       setLoading(false);
  //     })
  //     .catch(error => {
  //       setError(error.message);
  //       setLoading(false);
  //     });
  // }, []);
}

function PhotoList() {
  const { isLoading, data, error } = usePhotos();

  if (error) {
    return <div>{error}</div>;
  } else if (isLoading) {
    return <div>Loading...</div>;
  } else {
    return (
      <ul>
        {data?.map((photo) => {
          return (
            <li key={photo.id}>
              <img loading="lazy" src={photo.thumbnailUrl} alt={photo.title} />
              <h3>{photo.title}</h3>
            </li>
          );
        })}
      </ul>
    );
  }
}

const queryClient = new QueryClient();
ReactDOM.createRoot(document.getElementById('root')).render(
  <QueryClientProvider client={queryClient}>
    <PhotoList />
  </QueryClientProvider>
);

Reference​