Клиент Apollo - Можно ли повторно получить только фрагмент более крупного запроса при изменении его переменных? - PullRequest
Новая
       4

Клиент Apollo - Можно ли повторно получить только фрагмент более крупного запроса при изменении его переменных?

1 голос
/ 05 мая 2020

Я хотел изучить шаблон получения всех необходимых данных для страницы за один запрос. Допустим, у меня есть страница конфигурации пользователя, на которой нужен список команд, которым нужно назначить пользователя, и список ролей, которые пользователь может иметь. Я использую следующий запрос, чтобы получить первую страницу пользователей, а также все доступные роли и команды. 

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 на следующую страницу), она будет обновлять все . Есть ли способ сделать это так, чтобы он обновлял только измененный фрагмент? Или есть лучший образец для того, что я пытаюсь выполнить sh? Спасибо!

1 Ответ

0 голосов
/ 09 мая 2020

Вместо использования ловушки useQuery вы можете запросить исходные данные напрямую, используя метод ApolloClient.query напрямую, а затем в подкомпонентах вашей страницы подписаться на обновления подмножеств ваших данных ApolloClient. watchQuery

Вы можете просмотреть пример кода для ряда различных методов ApolloClient здесь .

...