首页 文章

只需观察/读取Apollo缓存中的值即可

提问于
浏览 次
0

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

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

这可以正常使用，因为我可以使用Apollo Chrome工具，并在我输入时看到它在缓存中设置和更新 . 这不是我需要保留在数据库中的值 .

我想要做的就是让它被另一个组件读取并在查询中使用它 . 我查看过大量的文档和教程，但对我来说似乎并不简洁或清晰 . 我有另一个组件，它有一个Query组件，它接受该字符串并使用它来搜索 . 我也知道这个工作正常，因为在我使用Apollo Link State之前，我只是让它在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的过程已经停止了 . 谢谢 .

graphql apollo react-apollo apollo-link-state

1 回答

  • 0

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

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

    然后在我的内心

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

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

    variables={{searchQuery: query}}

    一切都很顺利 .

    回复于

相关问题