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

Question

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

例如，我componentA使用grapqlfromreact-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>
)

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

我可以componentB使用相同的内容进行包装，organisationsQuery它将使用缓存，但我无法将我的查询与我的主 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）

谢谢你。

Answer 1

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

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

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