How to fetch data and store in React Context API?

Question

First time using the Context API so please bear with me.

I have a local JSON file that I'm trying to fetch from and place the response in the Context API so I can use globally around the app.

Upon running the app locally, there's a blank screen and the page doesn't seem to load. The page is in an endless loop so I can't see if it's loading or not.

Codesandbox here.

Any idea what I can change to bring in the data response successfully to the Context API?

apiContext.js:

import React, { useContext, useState, useEffect, createContext } from "react";
import axios from "axios";

const APIContext = createContext();

function APIContextProvider({ children }) {
  // Initialize state
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  // Fetch data
  useEffect(() => {
    let url = "../db.json";
    axios
      .get(url)
      .then(function (response) {
        setData(response.data.machines);
        setIsLoading(false);
        console.log(response.data.machines);
      })
      .catch((error) => console.log(error));
  }, []);

  return (
    <APIContextProvider value={{ data }} loading={isLoading}>
      {children}
    </APIContextProvider>
  );
}

export default APIContextProvider;

// Create a hook to use the APIContext, this is a Kent C. Dodds pattern
export function useAPI() {
  const context = useContext(APIContext);
  if (context === undefined) {
    throw new Error("Context must be used within a Provider");
  }
  return context;
}

App.js:

import "./App.css";
import List from "./List";
import APIContextProvider from "./context/apiContext";

function App() {
  return (
    <APIContextProvider>
      <div className="App">
        <List />
      </div>
    </APIContextProvider>
  );
}

export default App;

List.js:

import React from "react";
import { useAPI } from "./context/apiContext";

const FetchData = ({ isLoading }) => {
  // Grab data from useAPI in global context
  const { data } = useAPI();

  return (
    <div>{!isLoading ? <p>{data[0].category}</p> : <p>Loading...</p>}</div>
  );
};

export default FetchData;

Susian

You should not fetch api inside the context provider as it may lead to bugs if you were to add multiple fetch api's throughout the project in your child components. If I were you, I would set the fetch api in the main component you want it & set the data to the context, so you can still use it globally. – Halfway

Answer 1

Try this.

// apiContext.js
  return (
    <APIContext.Provider value={{ data, isLoading }}>
      {children}
    </APIContext.Provider>
  );

// List.js
const FetchData = () => {
  // Grab data from useAPI in global context
  const { data, isLoading } = useAPI();

  return (
    <div>{!isLoading ? <p>{data[0].category}</p> : <p>Loading...</p>}</div>
  );
};

Trudi