[英]storing data in state when data is fetched using graphql and apollo client
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 . 我一直在使用react和redux,每次,我在ComponentDidMount中调用一些rest api,我可以使用它设置一个状态,并将该状态传递给我的孩子,或者更改该状态并使用它。 I can keep that data in my redux too and do all what i want .
我也可以将这些数据保存在我的redux中,并做我想做的所有事情。 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 .
我最近开始使用graphql,我发现当使用查询在render内部获取数据时,我们将渲染所需的数据,依此类推。 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 ?
我在apollo中进入了acroos这个链接状态,但是由于它的基本作用而无法对其有一个清晰的了解? 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 )
)}
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 ?
假设我进行了查询,并且希望三个子组件共享相同的数据。如何使用graphql实现此目的?
Data read from api is accessible via the cache - default policy is cache first. 可通过缓存访问从api读取的数据-默认策略为缓存优先。 Each of children can access data from cache using graphql (HOCs or components).
每个孩子都可以使用graphql(HOC或组件)从缓存访问数据。 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.
如果所有查询字段都是父查询的子集-您可以使用仅缓存策略。
You can manipulate api data using getDerivedStateFromProps()
. 您可以使用
getDerivedStateFromProps()
操作api数据。 You can pass these values directly as props to the childs (w/o using graphql cache access). 您可以将这些值直接作为道具传递给子项(不使用graphql缓存访问)。
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) React classic(将道具传递到树上):只需将
data
道具(未修改)传递给子渲染<Child data={this.props.data} />
(HOC内的父级)或<Child data={data} />
(渲染<Query/>
组件中的prop)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.