只需从 Apollo 缓存中查看/读取值

Posted 2023-03-10

【中文标题】只需从 Apollo 缓存中查看/读取值

【英文标题】：Simply watching/reading a value from Apollo cache

【发布时间】：2019-01-19 19:08:36

【问题描述】：

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

【参考方案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

现在一切都很好。