Apollo GraphQL（React）跨组件的数据共享-Java 学习之路

我刚开始使用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 endpoints 的额外调用 . 这不太理想 .

访问已从服务器获取的数据的最佳方法是什么？（使用v2所以不能使用现有的redux存储，手动访问缓存似乎是低级别的，并且在网站上没有提到此用例：https://www.apollographql.com/docs/react/basics/caching.html）

谢谢 .

1 回答

1

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

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

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

回复于 2024-04-20T02:17:42+08:00

Apollo GraphQL（React）跨组件的数据共享

1 回答

相关问题