How to properly set queried data into context API

[MathiasHandle]

Hi, I've described my problem on StackOverflow however, I didn't get any reply so I'm looking for help here. But I suggest looking at my question there as it includes code for better understanding. LINK

I'm querying data via page query and then I'd like to store them in a global state using React Context API as I want to use my data in multiple components and my data flow both directions between these components. I do this by using an useEffect in which I use setData() hook from my context API.

The problem is between the time of rendering out components and setting state. I get type error data undefined, as on the first render my state is empty and is filled after querying and setting state is done. I found a solution for this, in conditionally rendering out my component, however, I find this approach hacky and unnecessary repetitive as I'd need to use this in every single component where I use my global state.

Also, I'm not using any variables in my queries, I was wondering if switching to a different query type might help. This is my first gatsby project I don't understand everything 100%.