React Query Networking with Axios and GraphQL

This example post covers simple examples of using React Query with HTTP requests through Axios and GraphQL libraries.

Background

I've written several blog posts about React Query and compiled them into an e-book. React Query is a library developed to manage server state using Promise structures, providing state and cache management.

In the examples below, we'll demonstrate using React Query with Axios and GraphQL in the network layer.

Before diving into React Query examples, it's important to understand how these operations were done without React Query. I've covered this in previous blog posts:

• Mocking Server APIs (MSW)
• Query (with Fetch API, Axios and GraphQL)
• Mutation (CRUD with Fetch API)

Use Case Examples

We have two similar examples available at:

• CRUD Operations Knowledge Map
• MSW Data React Query

Both examples implement a Task Application with create, edit, delete, and toggle completion actions.

React Query Integration

First, we enable React Query functionality by wrapping components with the Provider:

<QueryClientProvider client={queryClient}>
  <TaskAddButtonContainer taskName={taskName} setTaskName={setTaskName} />
  <TaskListContainer />
  <ReactQueryDevtoolsProduction initialIsOpen={false} />
</QueryClientProvider>

Query Examples

Axios Implementation

function TaskListContainer() {
  const { isLoading, error, data } = useQuery({
    queryKey: ["listTasks"],
    queryFn: () => AxiosManager.get("/tasks").then((res) => res.data),
  });

  if (isLoading) return "Loading...";
  if (error) return "An error has occurred: " + error.message;

  return (
    <div
      style={{
        backgroundColor: "gray",
        padding: "5px 10px",
        height: 300,
        overflowY: "auto",
      }}
    >
      <TaskList data={data} />
    </div>
  );
}

GraphQL Implementation

function TaskListContainer() {
  const { isLoading, error, data } = useQuery({
    queryKey: ["listTasks"],
    queryFn: () => GraphQLManager(graphqlApiUri, GET_TASKS),
  });

  if (isLoading) return "Loading...";
  if (error) return "An error has occurred: " + error.message;

  return (
    <div
      style={{
        backgroundColor: "gray",
        padding: "5px 10px",
        height: 300,
        overflowY: "auto",
      }}
    >
      <TaskList data={data} />
    </div>
  );
}

Mutation Examples

Axios Mutation

const TaskAddButtonContainer = (props) => {
  const mutation = useMutation({
    mutationFn: (newTask) => {
      return AxiosManager.post("/tasks", newTask)
        .then((res) => {
          console.log(res);
          queryClient.invalidateQueries("listTasks");
        })
        .catch((err) => {
          console.log(err);
        });
    },
  });
};

GraphQL Mutation

const TaskAddButtonContainer = (props) => {
  const mutation = useMutation({
    mutationFn: (newTask) => {
      return GraphQLManager(graphqlApiUri, CREATE_TASK, { data: newTask })
        .then((res) => {
          console.log(res);
          queryClient.invalidateQueries("listTasks");
        })
        .catch((err) => {
          console.log(err);
        });
    },
  });
};