Apollo GraphQL (React) 跨组件数据共享 [英] Apollo GraphQL (React) Data sharing across components

问题描述

我刚开始使用 react-apollo，想知道跨组件共享数据的最佳方式是什么.

例如，我有 componentA 它使用 react-apollo 中的 grapql 来获取一些数据(WrappedA>).我还有一些其他组件，componentB，位于我 UI 的其他位置，并且想要使用 componentA 已经获取的数据.下面附上一个非常简单的例子.

const ComponentA = ({ ...props }) =>(<div>组件A...id:{props.organisationsData.organisations.id}

)const ComponentB = ({ ...props }) =>(<div>****** 想要访问 props.organisationsData *****组件B...

)const 组织查询 = gql`查询组织{组织{ID姓名}}`const WrappedA = graphql(organisationsQuery, { name: 'organisationsData' })(WrappedA)const 容器 = ({ ...props }) =>(<div><WrappedA/><组分B/>

)

根据阿波罗文档(https://www.apollographql.com/docs/react/basics/setup.html#in-your-ui) 理想情况下，查询与 UI 组件相关联.

我可以用相同的 organisationsQuery 包装 componentB 并且它将使用缓存，但我无法将我的查询与我的主要 UI 部分共同定位.我找不到与跨组件共享数据相关的任何信息.

当我尝试

const WrappedB = graphql(gql`查询组织{组织{ID}}`, { name: 'organisationsData' })(WrappedB)

(省略 name)我看到了对 graphql 端点的额外调用.这并不理想.

访问已从服务器获取的数据的最佳方式是什么?(使用 v2 所以不能使用现有的 redux 存储，手动访问缓存似乎很低级，站点上没有提到这个用例:https://www.apollographql.com/docs/react/basics/caching.html)

谢谢.

解决方案

可以使用apollo link，这是本地状态管理，可以看文档

apollo-link-state 允许您将本地数据与远程数据一起存储在 Apollo 缓存中.要访问您的本地数据，只需使用 GraphQL 查询即可.您甚至可以在同一个查询中请求本地和服务器数据！

https://www.apollographql.com/docs/react/essentials/local-state.html

I just started using react-apollo and was wondering what was the best way to share data across components.

For example, I have componentA which is using grapql from react-apollo to fetch some data (WrappedA). I also have some other component, componentB, somewhere else in my UI and want to use the data already fetched by componentA. Attached a very simple example below.

const ComponentA = ({ ...props }) => (
    <div>
        ComponentA...
        id: {props.organisationsData.organisations.id}
    </div>
)

const ComponentB = ({ ...props }) => (
    <div>
    ****** Want to access props.organisationsData *****
    ComponentB...
    </div>
)

const organisationsQuery = gql`
    query organisations {
        organisations {
            id
            name
        }
    }
`

const WrappedA = graphql(organisationsQuery, { name: 'organisationsData' })(WrappedA)

const Container = ({ ...props }) => (
    <div>
        <WrappedA />
        <ComponentB />
    </div>
)

According to the apollo documentation (https://www.apollographql.com/docs/react/basics/setup.html#in-your-ui) ideally the query is tied to the UI component.

I can wrap componentB with the same organisationsQuery and it will use the cache but I wont be able to co-locate my query to my main UI part. I could not find any info related to sharing data across components.

When I tried

const WrappedB = graphql(gql`
    query organisations {
        organisations {
            id
        }
    }
`, { name: 'organisationsData' })(WrappedB)

(leaving out name) I saw an extra call made to the graphql endpoint. This is not ideal.

What would be the best way to access data already fetched from the server? (using v2 so cannot use an existing redux store, accessing the cache manually seems low level and this use case is not mentioned on the site: https://www.apollographql.com/docs/react/basics/caching.html)

Thank you.

解决方案

you can use apollo link , this is local state management , you can read documentation

apollo-link-state allows you to store your local data inside the Apollo cache alongside your remote data. To access your local data, just query it with GraphQL. You can even request local and server data within the same query!

https://www.apollographql.com/docs/react/essentials/local-state.html

这篇关于Apollo GraphQL (React) 跨组件数据共享的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！