只需 watching/reading 来自 Apollo 缓存的值

Question

我正在尝试执行我认为是一项简单的任务。我有一个成功使用 client.writeQuery 将项目添加到 cache.It 的搜索框，如下所示：

client.writeQuery({
        query: gql`
            {
                searchQuery {
                    query
                }
            }
        `,
        data: {
            searchQuery: {
                query: event.target.value,
                __typename: 'searchQuery'
            }
        }
    });

这按预期工作，因为我可以使用 Apollo Chrome 工具，并在我键入时看到它在缓存中设置和更新。这不是我需要保留在数据库中的值。

我只想让另一个组件读取它并在查询中使用它。我查看了大量的文档和教程，但对我来说似乎不是很简洁或清晰。我有另一个组件有一个查询组件，该组件接受该字符串并使用它进行搜索。我也知道这可以正常工作，因为在我使用 Apollo Link 状态之前，我只是让它在 React 状态下使用一个值。

如何让这个 React 组件像使用 React 状态一样监视和使用这个 Apollo 缓存值？后续组件如下所示：

const MainSearchQuery = ({searchQuery}) => (
    <Query query={MAIN_QUERY} variables={{searchQuery}}>
        {({loading, error, data}) => {
            if (loading) return(
                <p>Finding something ...</p>
            );

            if (error) return (
                <p>Ah man! There was nothing to find.</p>
            );

            return (
                <MainSearchResults searchResults={data.ResultsBySubstring} />
            );
        }}
    </Query>
);

调用 MAIN_QUERY 的查询组件只是将返回的数据传递给负责呈现结果的组件。任何帮助将不胜感激，因为这个我认为很容易解决的小问题已因学习进度 Apollo/GraphQL 停止而减慢。谢谢

Answer 1

在我的 MainSearchQuery 组件中，我将其切换为 ES6 class 组件，并且我能够使用 react-apollo 的 compose 函数并导出组件，如下所示：

export default compose(
    graphql(READ_SEARCHQUERY, {
        props: ({ data: {searchQuery}}) => ({
            searchQuery
        })
    })
)(MainSearchQuery)

然后在我的

里面

    const { searchQuery : { query } } = this.props;

然后让我的查询组件采用如下变量：

variables={{searchQuery: query}}

现在一切都很好。

只需 watching/reading 来自 Apollo 缓存的值

Simply watching/reading a value from Apollo cache

apollo

graphql

react-apollo

apollo-link-state