Stephen Sanwo
Stephen Sanwo

Stephen Sanwo

How to setup React-Query with axios and Context API

Photo by DeepMind on Unsplash

How to setup React-Query with axios and Context API

Code Snippet

Stephen Sanwo's photo
Stephen Sanwo
·Jul 1, 2022·

1 min read

Subscribe to my newsletter and never miss my upcoming articles

This code snippet helps setup react-query to fetch data with axios from a GET request endpoint, and also pass the data to children components with React Context API.

Note: The entire app must be wrapped in QueryClientProvider for react-query to work. this will typically be done at root level in react, i.e App.js or index.js

import React, { Fragment, useState } from "react";
import { Switch, Route, useRouteMatch } from "react-router-dom";
import Navbar from "../shared/components/Navbar";
import Home from "./Home";
import Post from "./Post";
import { useQuery } from "react-query";
import axios from "axios";
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

export const PostContext = React.createContext();

const SampleComponent = () => {
  const { path } = useRouteMatch();

// Define function to fetch data with axios
  const getCode = async () => {
    const { data } = await axios.get(
    return data;

// Use useQuery from React-Query to automatically handle the data fetching, refetching, loading states etc.

  const { isLoading, status, error, data, isFetching } = useQuery(
    ["post", limit, filter],
    () => getCode(limit, filter)

  return (
    <QueryClientProvider client={queryClient}>
      <Navbar />
        <Route exact path={"/:post_id"} component={Post} />
        <Route path={"/"} component={Home} />

export default SampleComponent;
Share this