storing data in state when data is fetched using graphql and apollo client

Question

I have been using react and redux and everytime ,I make a call to some rest api in ComponentDidMount ,I can set a state with it and pass that state onto my child or change that state and play with it . I can keep that data in my redux too and do all what i want . I recently started using graphql and I see that as one fetches data inside render using a query , we render the data that we want to and so on . But I am concerned as how instead of rendering it ,I can store it in some state ,play with it and then pass it down to the child . I came acroos this link state in apollo but couldn't have a clear understanding of it as what it basically does ? How to solve this issue of state management and playing with that state which is set by the data coming from the apollo . I am really missing out this feature of

this.setState({
  data:(some api data )
)}

Answer 1

Suppose I made a query and I want three of my Child Components to share the same data .How will you achieve this with graphql ?

1st method

Data read from api is accessible via the cache - default policy is cache first. Each of children can access data from cache using graphql (HOCs or components). Each of them can use a different query to get data the component really needs. If all of queries fields are subset of parent query - you can use cache-only policy.

2nd method

You can manipulate api data using getDerivedStateFromProps(). You can pass these values directly as props to the childs (w/o using graphql cache access).

3rd method

React classic (pass props down the tree): simply pass data prop (unmodified) to child rendering <Child data={this.props.data} /> (parent inside HOC) or <Child data={data} /> (render prop within <Query/> component)