如何从 Apollo 缓存中查询没有 ROOT_QUERY 上的查询

Posted 2023-03-10

【中文标题】如何从 Apollo 缓存中查询没有 ROOT_QUERY 上的查询

【英文标题】：How to query from Apollo cache not having the query on ROOT_QUERY

【发布时间】：2021-01-21 00:47:50

【问题描述】：

我需要实现一个嵌套项目（任务）列表，每个任务都应该是可编辑的，像这样

我有两种使用 React/Apollo/GraphQL 的变体：

1.分别为每个任务使用查询

这很好用，但每个任务都有很多单独的查询

2。 2 个查询：1 个从服务器获取所有任务，1 个从 CACHE 获取一个

我的想法是在父组件的某个地方获取所有可用任务，如下所示：

const TASKS_NESTED = gql`
    query TaskWithNestedChildren($taskId: String!) 
        taskWithNestedChildren(taskId: $taskId) 
            _id
            name
            children 
                _id
            
        
    
`;

const ParentComp = () => 
    const  data  = useQuery(TASKS_NESTED, 
        variables:  taskId: parentTaskId ,
    );

这会将所有任务写入缓存

在我的子组件中，我会从缓存中获取任务的数据，就像这样

const TASK = gql`
    query Task($taskId: String!) 
        task(taskId: $taskId) 
            _id
            name
            children 
                _id
            
        
    
`;

const Task = (...) => 

    const  data, loading  = useQuery(TASK, 
        variables:  taskId ,
        fetchPolicy: 'cache-only',
    );

它不会从缓存中加载每个任务，它说：

在 ROOT_QUERY 对象上找不到字段“任务”

这是我在 Node.js 方面的架构

type Query 
    task(taskId: String!): Task
    taskWithNestedChildren(taskId: String!): [Task]

这意味着taskWithNestedChildren 返回任务对象数组，task 返回一个任务对象

可能的解决方案 1 在子组件中使用client.readFragment从缓存中获取任务数据。

const task = client.readFragment(
    id: `Task:$taskId`,
    fragment: TASK_FRAGMENT,
);

这种方法的问题是任务（子）组件没有订阅任何缓存更改，并且在更新缓存时不会重新渲染组件。

还有其他解决方案吗？

【问题讨论】：

apollographql.com/docs/react/local-state/local-resolvers/…

那是完全不同的东西，已弃用@xadm

嗨，“Task”类型中的“children”是指“taskWithNestedChildren”吗？如果是，您可以试试这个：hashinteractive.com/blog/graphql-recursive-query-with-fragments 如果您仍然无法弄清楚，请使用github.com/apollographql/react-apollo-error-template 或codesandbox.io/s/github/apollographql/… 使其可复制，我很乐意为您提供更多帮助。

【参考方案1】：

1- 在查询中使用 @client 如下所示，以便它使用缓存

const TASK = gql`
    query Task($taskId: String!) 
        task(taskId: $taskId)@client 
            _id
            name
            children 
                _id
            
        
    
`;

2- 还添加 typePolicies 以便它定义查询任务的逻辑，因为它不在根查询中

在此处了解更多信息 https://www.apollographql.com/docs/react/caching/cache-configuration/