Using createContext to share API data globally through React app - reactjs

Question

I'm currently working on an app that fetches data from an API and displays it on the front-end. I've got the data coming up correctly when I print it to the console (so I know fetching the data isn't an issue) and I want to be able to use this data globally across different components. I'm aiming to use createContext to do this but haven't figured it out yet. Here's my code so far:
useFetch.ts
export const useFetch = (url: string) => {
const [fetchedData, setFetchedData] = useState(null);
const [loaded, setLoaded] = useState(false);
useEffect(() => {
getAllFetchedData()
}, []);
const getAllFetchedData = async () => {
await axios.get(url).then((response) => {
const data = response.data;
setFetchedData(data)
setLoaded(true)
})
.catch(error => console.error(`Error: ${error}`));
}
return [loaded, fetchedData];
}
DataProvider.tsx
type PostProviderProps = {
children: React.ReactNode
}
export default function DataProvider({ children }: PostProviderProps) {
const [loaded, data] = useFetch(`https://jsonplaceholder.typicode.com/posts`)
return (
<PostContext.Provider value = {[loaded, data]}>
{children}
</PostContext.Provider>
)
}
DataContext.ts
type PostContextType = {
userId: number;
id: number;
title: string;
body: string;
}
const PostContext = createContext<PostContextType>({} as PostContextType)
export default PostContext
If anybody could help it'd be really appreciated 🙂

Answer 1

The PostContext is typed to be an object with userId, id, title, and body properties, but the value you are trying to provide is an array of the loaded and data values returned from the useFetch hook. It appears that you are fetching an array of posts.
I suggest the following updates to the code.
First, update the useFetch hook to take a generic type for the fetched return value.
const useFetch = <T extends unknown>(url: string): [boolean, T | null] => {
const [fetchedData, setFetchedData] = useState<T | null>(null);
const [loaded, setLoaded] = useState(false);
useEffect(() => {
const getAllFetchedData = async () => {
await axios
.get(url)
.then((response) => {
const data = response.data;
setFetchedData(data);
setLoaded(true);
})
.catch((error) => console.error(`Error: ${error}`));
};
getAllFetchedData();
}, []);
return [loaded, fetchedData];
};
Update the context to use a better interface that aligns with (1) what you are fetching and (2) what you want to provide to the app as a context value.
interface Post {
userId: number;
id: number;
title: string;
body: string;
}
interface PostContextType {
loaded: boolean;
posts: Post[] | null;
}
const PostContext = createContext<PostContextType>({
loaded: false,
posts: []
});
Create the DataProvider component and a custom hook to access the context.
const usePosts = () => React.useContext(PostContext);
function DataProvider({ children }: React.PropsWithChildren<{}>) {
const [loaded, data] = useFetch<Post[]>(
`https://jsonplaceholder.typicode.com/posts`
);
const value = {
loaded,
posts: data
};
return (
<PostContext.Provider value={value}>
{children}
</PostContext.Provider>
);
}
Wrap the app code with the provider.
function App() {
return (
<DataProvider>
....
</DataProvider>
);
}
Consume the context in a descendent component.
const MyComponent = () => {
const { loaded, posts } = usePosts();
return loaded ? (
posts?.map((post) => (
<div key={post.id}>
<h2>{post.title}</h2>
<h3>{post.userId}</h3>
<p>{post.body}</p>
</div>
))
) : (
<>"Loading"</>
);
};