Question

我正在尝试执行我认为很简单的任务。我有一个搜索框可以成功使用client.writeQuery将项目添加到缓存中。它看起来像这样：

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

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

我要做的就是让它被另一个组件读取，并在查询中使用它。我看了很多文档和教程，但对我来说似乎并不十分简洁。我还有一个组件，该组件具有一个查询组件，该组件接受该字符串并将其用于搜索。我也知道这可以正常工作，因为在使用Apollo链接状态之前，我只是让它在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的Query组件只是将返回的数据传递给负责呈现结果的组件。我认为这个简单问题很难解决，但由于学习Apollo / GraphQL的进展停滞了，所以任何帮助将不胜感激。谢谢。

Answer 1

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

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

然后进入我的

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

然后让我的查询组件接受像这样的变量：

variables={{searchQuery: query}}

现在一切都很好。

只需观看/读取来自Apollo缓存的值

1 个答案: