CODEWITHSUNDEEP
reactjsreduxapollo
ratojakuf
ratojakuf

Reputation: 738

How to dispatch action with result of apollo query?

In the root component, I have Apollo Query which retrieves data from the server then I want immediately dispatch this data to redux store and then use it in child's components on their first render. So the scheme is like this :

<ApolloProvider>
  <ReduxProvider>
    <SomeChildComponent /> --- Can be a lot of nested components
  </ReduxProvider>
</ApolloProvider>

Now I am using React.Context to pass data from Query to all child components and do other stuff with the local state by redux. But I need that query result to be in redux store.

So where would I place the dispatch method for this data? I can't use componentDidMount because I need to handle this data in children before their first render. And also why I need componentDidMount for data which has already fetched and is ready to use.

I see the only way to dispatch it in the render method but I understand that is antipattern at all and can't find information about my case because every question are about fetching data via redux but I have it already so how to deal with this?

Upvotes: 2

Views: 453

Answers (1)

Alex Broadwin
Alex Broadwin

Reputation: 1338

You can pass a function to the onCompleted property of the query component, it receives the result data as the first argument. From there you can dispatch your action.

Upvotes: 2

Related Questions