Apollo GraphQL (React) 跨组件的数据共享

本文是小编为大家收集整理的关于Apollo GraphQL (React) 跨组件的数据共享的处理/解决方法，可以参考本文帮助大家快速定位并解决问题，中文翻译不准确的可切换到English标签页查看源文。

中文
English

问题描述

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

例如，我有componentA，它使用grapql从react-apollo中获取一些数据(WrappedA).我还有其他一些组件，componentB，在我的UI中的其他地方，并且想使用componentA>>>的数据. 在下面附上一个非常简单的示例.

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>
)

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

我可以用相同的organisationsQuery包裹componentB，它将使用缓存，但我无法将查询将我的查询转移到主UI部分.我找不到与组件共享数据有关的任何信息.

当我尝试

时

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

(抛弃name)我看到了对GraphQL端点的额外呼叫. 这不是理想的.

访问已经从服务器获取的数据的最佳方法是什么? (使用v2因此无法使用现有的Redux商店，手动访问缓存似乎很低，并且该用例未在网站上提及: https://www.apollographql.com/docs/react/basics/caching.html )

谢谢.

推荐答案

您可以使用Apollo链接，这是本地状态管理，您可以阅读文档

Apollo-Link状态使您可以将本地数据存储在Apollo缓存中，并与远程数据一起存储.要访问您的本地数据，只需使用GraphQL查询.您甚至可以在同一查询中请求本地和服务器数据！

https:///www.apollograph/essentials/local-state.html

本文地址：https://www.itbaoku.cn/post/1938078.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.