Question

此代码段看起来很长，但实际上很简单；它会创建一个节点并呈现其数据，然后更新该节点并呈现更新的数据，但是即使检查商店直接显示createFoo查询的商店是否具有更新，创建的数据也不会被更新。已更新。我想了解如何确保依赖Apollo Client存储中数据的组件是最新的，最好是自动更新。

const CREATE_FOO = gql`
  mutation {
    createFoo(data: {}) {
      id
      bar
    }
  }
`;

const UPDATE_FOO = gql`
  mutation($id: ID!) {
    updateFoo(where: { id: $id }, data: { bar: "baz" }) {
      id
      bar
    }
  }
`;

<Mutation mutation={CREATE_FOO}>
  {(createFoo, { data: createData }) => {
    if (createData) {
      return (
        <div>
          <p>{JSON.stringify(createData.createFoo)}</p>
          <Mutation
            mutation={UPDATE_FOO}
            variables={{ id: createData.createFoo.id }}
          >
            {(updateFoo, { data: updateData }) => {
              if (updateData) {
                return <p>{JSON.stringify(updateData.updateFoo)}</p>;
              }
              return (
                <button onClick={updateFoo} type="button">
                  updateFoo
                </button>
              );
            }}
          </Mutation>
        </div>
      );
    }
    return (
      <button onClick={createFoo} type="button">
        createFoo
      </button>
    );
  }}
</Mutation>

数据模型：

type Foo {
  id: ID! @unique
  bar: String
}

存储数据：

{
  "ROOT_QUERY": {
    "userSidebarWidth": 200
  },
  "Foo:cjqd2cd41zi140a98ugrjpz2m": {
    "id": "cjqd2cd41zi140a98ugrjpz2m",
    "bar": "baz",
    "__typename": "Foo"
  },
  "ROOT_MUTATION": {
    "createFoo({\"data\":{}})": {
      "type": "id",
      "generated": false,
      "id": "Foo:cjqd2cd41zi140a98ugrjpz2m",
      "typename": "Foo"
    },
    "updateFoo({\"data\":{\"bar\":\"baz\"},\"where\":{\"id\":\"cjqd2cd41zi140a98ugrjpz2m\"}})": {
      "type": "id",
      "generated": false,
      "id": "Foo:cjqd2cd41zi140a98ugrjpz2m",
      "typename": "Foo"
    }
  }
}

Answer 1

假设您有一个width / data.length / 1.8组件，如下所示：

Query

在安装组件时，Apollo将从服务器或缓存中获取数据（取决于是否缓存数据以及您的提取策略是什么）。但是，它也订阅以更改缓存中的更改。因此，如果您获取ID为const GET_FOO = gql` query SomeQuery { getFoo { id bar } } `; <Query query={GET_FOO}> {({ loading, error, data }) => ( <SomeComponent/> )} </Query>的{{1}}，并通过另一个操作在缓存中对其进行了更新，则组件将收到通知，并相应地进行更新。具体来说，传递给render prop函数的Foo值将被更改以反映缓存中的更改。

1组件具有类似于data组件的render prop函数签名，包括Mutation属性。但是，此属性仅反映调用Query函数时返回的数据。尽管突变的结果存储在缓存中，但通过data组件公开的mutate并不是对缓存的预订的结果—而是，它是对缓存做出反应的便捷方式data调用的结果。 Mutation组件内的mutate唯一可能发生变化的情况是是否再次调用data函数。

如果我们修改您的示例并将组件包装在Mutation组件中，我们可以在组件内部显示查询中的数据，并有可能忽略两个{{1}中的任何一个的mutate } 组件。假设Query和data引用了缓存中的同一项，则只要其中一个突变解决，Mutation组件中的数据就会更新。

更新后，变异组件与商店不同步

1 个答案: