Making HTTP Requests with React Query — GET Requests

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.

GET Requests with the useQuery Hook

To make GET requests, we use the useQuery hook provided by React Query.

For instance, we can write:

index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { QueryClient, QueryClientProvider } from "react-query";
import App from "./App";

const queryClient = new QueryClient();

const rootElement = document.getElementById("root");
ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <StrictMode>
      <App />
    </StrictMode>
  </QueryClientProvider>,
  rootElement
);

App.js

import axios from "axios";
import React from "react";
import { useQuery } from "react-query";

export default function App() {
  const { isLoading, isError, data, error } = useQuery("yesNo", () =>
    axios("https://yesno.wtf/api")
  );

  if (isLoading) {
    return <span>Loading...</span>;
  }

  if (isError) {
    return <span>Error: {error.message}</span>;
  }

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

We wrap our App with the QueryClientProvider higher-order component to let us use the hooks provided by React Query to make HTTP requests.

Then in App , we call useQuery with an identifier for the request as the first argument.

The 2nd argument has the function that makes the HTTP request.

It should return a promise with the response data.

The hook returns an object with various properties.

isLoading is true when the request is loading.

isError is true when the request has an error.

data has the response data.

error has the error content.

We can replace the boolean properties with the status property.

For instance, we can write:

import axios from "axios";
import React from "react";
import { useQuery } from "react-query";

export default function App() {
  const { status, data, error } = useQuery("yesNo", () =>
    axios("https://yesno.wtf/api")
  );

  if (status === "loading") {
    return <span>Loading...</span>;
  }

  if (status === "error") {
    return <span>Error: {error.message}</span>;
  }

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

If status is 'loading' , then the request is loading.

If status is 'error' , then the request has an error.

Query Keys

Query keys are the first argument of the useQuery .

It identifies the request being made uniquely.

We can pass in a string as we did in the above examples.

But we can also pass in array keys if we need to pass in more information to identify the request.

For instance, we can write:

import axios from "axios";
import React from "react";
import { useQuery } from "react-query";

export default function App() {
  const { status, data, error } = useQuery(
    ["todo", 5],
    ({ queryKey: [, id] }) => {
      return axios(`https://jsonplaceholder.typicode.com/posts/${id}`);
    }
  );

  if (status === "loading") {
    return <span>Loading...</span>;
  }

  if (status === "error") {
    return <span>Error: {error.message}</span>;
  }

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

to call useQuery with an array key.

We can get the key’s content with the queryKey property of the parameter in the callback in the 2nd argument.

We get the id from the 2nd entry of the array just like how we passed them in.

Conclusion

We can make GET requests easily in our React app with React Query.