1

我正在尝试执行我认为是一项简单的任务。我有一个搜索框，它成功地使用 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 的进展而减慢。谢谢。

4

1 回答 1

2

在我的 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}}

现在一切都很好。

于 2018-08-13T08:58:15.613 回答