React GraphQL query results as an object without JSX? - reactjs

Question

I am coming here as a last resort! I have been searching for 1-2 weeks now and haven’t came across anything!
I want to use GraphQL in react (I have an Apollo react client and Apollo backend), but I want to be able to call a query and return the results as an object without it needing to be done using a component or class.
I have a tried using client.query but whatever way I try I only get promises returned.
I want something like this:
const myData = some kind of query call
edit:
Want I want to do is pass an array of objects into a component which will then render the data how I want it.
An example would be passing a list of events into a calendar cell to be displayed for that day.
Here's a better example of what I want to do:
const CustomCellOne = () => (
<Query query={my_query} variables={ vars }>
{({ loading, error, data }) => {
const dataPoints = data.blahQuery;
return (
<CustomCellTwo data={dataPoints} />
)
}}
</Query>
);

Answer 1

Network requests are asynchronous to prevent blocking UI. The Fetch API, which Apollo uses under the hood, utilizes Promises instead of the more traditional callbacks to handle asynchronously requesting resources across the network, so Apollo's API is based on Promises as well. There is no method available that will allow you to synchronously fetch a GraphQL query -- you just need to structure your code appropriately to handle the Promise once it resolves.
The following examples assume you've correctly configured a client instance. Using then:
function doSomething () {
client.query({ query: SOME_QUERY })
.then(({ data }) => {
// Use the returned data however you like
})
.catch(error => {
// Handle error
})
}
Using async/await:
async function doSomething () {
try {
const { data } = await client.query({ query: SOME_QUERY })
} catch (error) {
// Handle error
}
}
If you are unfamiliar with Promises, it would be to your benefit to review the appropriate documentation and check out some tutorials.