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

【问题标题】：Apollo Client - Possible to refetch only a fragment of a larger query when it's variables change?Apollo Client - 当变量发生变化时，可以只重新获取较大查询的片段吗？
【发布时间】：2020-08-20 07:52:45
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript reactjs graphql apollo

【解决方案1】：

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

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

【讨论】：