Making HTTP Requests with React Query — Placeholder Data, Initial Data, and Prefetching

The React Query library lets us make HTTP requests easily in our React apps.

In this article, we’ll look at how to make HTTP requests with React Query.

Placeholder Data

We can add placeholder data that are set when the request is loading.

To do this, we set the placeholderData property by writing:

import axios from "axios";
import React from "react";
import { useQuery } from "react-query";
export default function App() {
  const { data } = useQuery("yesNo", () => axios("https://yesno.wtf/api"), {
    placeholderData: {}
  });

  return <div>{JSON.stringify(data)}</div>;
}

We can also load placeholder data from the cache.

To do this, we write:

import axios from "axios";
import React from "react";
import { useQuery, useQueryClient } from "react-query";
export default function App() {
  const queryClient = useQueryClient();
  const { data } = useQuery("yesNo", () => axios("https://yesno.wtf/api"), {
    placeholderData: () => {
      return queryClient.getQueryData("yesNo");
    }
  });

  return <div>{JSON.stringify(data)}</div>;
}

We get the cached data with the queryClient.getQueryData method with the identifier of the request.

Initial Query Data

Also, we can set initial query data that are set when the query is first made.

To do this, we write:

import axios from "axios";
import React from "react";
import { useQuery } from "react-query";
export default function App() {
  const { data } = useQuery("yesNo", () => axios("https://yesno.wtf/api"), {
    initialData: {}
  });

  return <div>{JSON.stringify(data)}</div>;
}

We can also set the amount of time in milliseconds that the data is considered fresh with the staleTime property.

To do this, we write:

import axios from "axios";
import React from "react";
import { useQuery } from "react-query";
export default function App() {
  const { data } = useQuery("yesNo", () => axios("https://yesno.wtf/api"), {
    initialData: {},
    staleTime: 1000
  });

  return <div>{JSON.stringify(data)}</div>;
}

We set stateTime to 1000 milliseconds to invalidate the initial data after that time.

We can also set initialData to a function to only set the initial data when the query is first made:

import axios from "axios";
import React from "react";
import { useQuery } from "react-query";
export default function App() {
  const { data } = useQuery("yesNo", () => axios("https://yesno.wtf/api"), {
    initialData: () => {
      return {};
    }
  });

  return <div>{JSON.stringify(data)}</div>;
}

Prefetching

React Query lets us prefetch data.

For instance, we can write:

import axios from "axios";
import React, { useEffect } from "react";
import { useQuery, useQueryClient } from "react-query";
export default function App() {
  const queryClient = useQueryClient();
  const { data } = useQuery("yesNo", () => axios("https://yesno.wtf/api"));

  const prefetch = async () => {
    await queryClient.prefetchQuery("yesNo", () => Promise.resolve({}));
  };

  useEffect(() => {
    prefetch();
  }, []);

  return <div>{JSON.stringify(data)}</div>;
}

to call queryClient.prefetchQuery to prefetch the response for the request with identifier 'yesNo' .

Conclusion

We can prefetch data, set placeholder data, and set initial data for our requests with React Query.