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 方法的示例代碼。