Вычисляемые поля в схеме GraphQL или запрос с клиентом Apollo - PullRequest
Новая
       5

Вычисляемые поля в схеме GraphQL или запрос с клиентом Apollo

2 голосов
/ 10 мая 2019

У меня есть запрос GraphQL, который возвращает два поля, titleDe и titleFr, представляющих заголовок сообщения на двух разных языках.

Я хотел бы иметь третье поле на стороне клиента (так, вероятно, определено локальное состояние) для хранения заголовка для текущего языка в title. Мое приложение должно всегда иметь возможность вызывать только title и получать заголовок на текущем языке.

Существует ли эквивалент вычисляемых полей в Apollo (Local State) или GraphQL, который позволил бы мне вызвать title, который проверяет, какая локаль установлена ​​глобально в Apollo Local State (так что другой запрос), а затем возвращает titleDe или titleFr на основании этого?

Я еще не так много работал с GraphQL и Apollo. Я знаю, как решить эту проблему в других местных государственных управляющих, например NgRx, Vuex, Redux с концепцией геттеров / селекторов.

Моя цель - абстрагировать логику titleDe / Fr от компонентов моих приложений, чтобы они не требовали модели со всеми свойствами языка и могли вызывать только упрощенное свойство title, которое будет возвращать правильную строку на основе глобальный языковой стандарт.

1 Ответ

0 голосов
/ 10 мая 2019

Вы можете легко добавить дополнительные поля, используя локальное состояние Apollo. Из документов :

Локальные распознаватели очень похожи на удаленные распознаватели. Вместо того, чтобы отправлять запрос GraphQL на удаленную конечную точку GraphQL, которая затем запускает функции распознавателя для вашего запроса, чтобы заполнить и вернуть набор результатов, клиент Apollo запускает локально определенные функции распознавателя для любых полей, помеченных директивой @client.

Вот простой пример: 

const GET_LOCALE = gql`
  query GetLocale {
    locale @client
  }
`;

const client = new ApolloClient({
  cache,
  link,
  resolvers: {
    Article: { // or whatever your actual type is called
      title: (article, _args, { cache }) => {
        const { locale } = cache.readQuery({ query: GET_LOCALE });
        switch (locale) {
          case 'de': return article.titleDe
          case 'fr': return article.titleFr
        }
      },
    },
  },
});

// Initialize the cache after creating it
cache.writeData({
  data: {
    locale: getPreferenceOrProvideDefault(),
  },
});

Здесь мы также храним locale в локальном состоянии и используем readQuery, чтобы получить его внутри нашего распознавателя. Однако вы также можете напрямую получить предпочтение из другого места (например, localStorage).

Обратите внимание, что вам все равно нужно будет запрашивать эти поля как часть вашего запроса - т. Е. Ваше поле title не будет расширено до соответствующего набора полей на стороне сервера.

...