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

Posted 2023-03-08

【中文标题】Apollo GraphQL (React) 跨组件数据共享

【英文标题】：Apollo GraphQL (React) Data sharing across components

【发布时间】：2018-06-29 04:21:58

【问题描述】：

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

例如，我有componentA，它使用来自react-apollo 的grapql 来获取一些数据（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>
)

根据 apollo 文档 (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）

谢谢。

【问题讨论】：

主 UI 组件不需要查询，但这两个 A/B 组件都需要。所以将它与主要的 UI 组件放在一起是没有意义的。因为该组件不需要任何东西。

【参考方案1】：

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

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

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