Apollo Client - 当变量发生变化时，可以只重新获取较大查询的片段吗？

Question

我想探索在一个请求中获取页面所有需要的数据的模式。 所以假设我有一个用户配置页面，它需要一个团队列表来分配一个用户，以及一个用户可以拥有的角色列表。 我正在使用以下查询来获取用户的第一页以及所有可用的角色和团队。

import { gql } from "@apollo/client";

const listUser = gql`
  fragment listUser on Query {
    users(page: $page, per: $per) {
      edges {
        node {
          id
          name
          title
          avatar
        }
      }
      pageInfo {
        count
      }
    }
  }
`;

const roleFragment = gql`
  fragment roleFragment on Query {
    roles {
      name
      id
    }
  }
`;

const teamsFragment = gql`
  fragment teamsFragment on Query {
    teams {
      nodes {
        id
        name
        manager {
          name
        }
      }
    }
  }
`;

export const getUserConfig = gql`
  query getUserConfig($page: Int, $per: Int) {
    ...listUser
    ...roleFragment
    ...teamsFragment
  }
  ${listUser}
  ${roleFragment}
  ${teamsFragment}
`;

我像这样使用它（使用graphql-codegen生成）：

const { loading, error, data, refetch } = useGetUserConfigQuery({
 variables: {
   page: 1,
   per: 7,
  }
});

这非常有效，让我可以在一次往返中获取页面所需的数据。 但是，每当我更改用户的页面变量（显然是 go 到下一页）时，它都会重新获取所有内容。 有没有办法做到这一点，以便它只重新获取变量更改的片段？ 或者我想要完成的事情有更好的模式吗？ 谢谢！

Answer 1

您可以直接使用ApolloClient.query 方法直接查询初始数据，而不是使用 useQuery 挂钩，然后在页面的子组件中订阅数据子集ApolloClient.watchQuery的更新

您可以在此处查看一系列不同 ApolloClient 方法的示例代码。