Call REST API and store its response in Context API

Question

I have a requirement in my react application to store API driven data in Context API. Class functions are not there only functional components we are using.

I have tried to use await with fetch call but no success

const App = props => {
  const { initState } = props
  return (
    <AppContextProvider  initState={initState}>
      <HoldingDetailsContainer initState={initState} />
    </AppContextProvider>
  )
}

const AppContextProvider = (props) => { 
    const { resources } = useGetResourceApi();


    const context = {
        resources 
    };
    return (
        <AppContext.Provider value={context}>
            {props.children}
        </AppContext.Provider>
    )
}

If i use await in front of useGetResourceApi then it throws error "Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead."

Is it possible to store API driven data in context API

Rockribbed

Is useGetResourceApi a custom hook? – Tonsillotomy

This is a custom function written that is doing axios call internally – Rockribbed

Answer 1

I can't see the details of your API call or of the HoldingDetailsContainer, and also I can't see your imports, but below is a full (contrived) example of using the Context API + Hooks + function components to fetch data via a REST API and provide it to components:

// App.jsx

import React from "react";
import { APIContextProvider } from "./apiContext";
import Users from "./Users";

export default function App() {
  return (
    // wrap your app (or just components that need to consume the context)
    <APIContextProvider>
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        // the Users component sits below the Provider so can consume its context
        <Users />
      </div>
    </APIContextProvider>
  );
}

// apiContext.jsx

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

const APIContext = createContext();

export function APIContextProvider({ children }) {
  // for more complex state you might set up useReducer for Redux-like state updates
  const [users, setUsers] = useState([]);
  // useEffect is a lifecycle method for function components, run once after mount
  useEffect(() => {
    // the callback to useEffect can't be async, but you can declare async within
    async function fetchData() {
      // use the await keyword to grab the resolved promise value
      // remember: await can only be used within async functions!
      const { data } = await axios.get(
        `https://jsonplaceholder.typicode.com/users`
      );
      // update local state with the retrieved data 
      setUsers(data);
    }
    // fetchData will only run once after mount as the deps array is empty 
    fetchData();
  }, []);
  return (
    <APIContext.Provider
      // Add required values to the value prop within an object (my preference)
      value={{
        users
      }}
    >
      {children}
    </APIContext.Provider>
  );
}

// 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;
}

// Users.jsx

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

export default function Users() {
  // Now we can grab the data we want via useAPI, which abstracts useContext()
  const { users } = useAPI();
  return (
    <ul>
      // Now we can use the data from the API in our components
      // ofc this simple example can be adapted to make further calls
      {users.map(u => (
        <li key={u.id}>{u.username}</li>
      ))}
    </ul>
  );
}

A working, live version of the above code can be found in this sandbox I put together: https://codesandbox.io/s/context-api-fetch-data-provider-example-0rymy

Unexacting

Wow! I love the comments in the code. It almost feels like a complete tutorial. Thanks a bunch! – Immix

I used similarly but my app.js had router implemented It didn't work gave "Context must be used within a Provider ?? any idea why – Bourgeois

Answer 2

please look at this gist : https://gist.github.com/nimahkh/9c008aaf2fd2d1cc83cd98c61e54979a

i think you have to change your structure , storing in context , is like storing in Database or redis cache .
also , storing in context is an async process , so you have to fetch api , then store it in context .

i will show you a code with my gist example

const App = () => {
    const initialState = {
        theme: {primary: 'green'}
    };

    const reducer = (state, action) => {
        switch (action.type) {
            case 'storeApi':
                return {
                    ...state,
                    store_api: action.storeApi                };

            default:
                return state;
        }
    };

    return (
        <StateProvider initialState={initialState} reducer={reducer}>
            <HoldingDetailsContainer />
        </StateProvider>
    );
}

then we are going to dispatch , our request into context

HoldingDetailsContainer Component

const [data,setData]=useState();

function fethcData(){
   fetchApi().then(res=>{
       const {data}=res.data;
       setData(data)  //setData is useState function
})
}

//Now i need a side effect , to store data, after storing in state 
useEffect(()=>{
    dispatch({
      type: 'storeApi',
      storeApi: {data}
    })
})

Spanos

It is working, i am able to store API driven data in conext. Thanks one more thing, can we update provider data from child component? – Rockribbed

your welcome , yes , you can dispatch it with example that i give you . – Spanos