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

Question

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

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

1。 useQuery分别为每个任务

这很好用，但是每个任务都有很多查询

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,
});

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

还有其他解决方案吗？

Answer 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/

Answer 2

我刚刚遇到这个问题，对我有用的是利用缓存重定向：https://www.apollographql.com/docs/react/caching/advanced-topics/#cache-redirects.