React + Apollo/GraphQL: структура папок для совместного размещения пользовательских запросов?

Я не эксперт по GraphQL, поэтому ищу некоторые идеи. У меня есть приложение, которое выглядит так:

src/
  components/
    FooPage
    BarPage
    BazPage

Все 3 страницы будут делать одни и те же запросы, но с разными полями.

// FooPage
const GET_DOGS_1 = gql`
  query GetDogs {
    dogs {
      id
    }
  }
`;

// BarPage
const GET_DOGS_2 = gql`
  query GetDogs {
    dogs {
      id
      breed
      name
    }
  }
`;

// BazPage
const GET_DOGS_3 = gql`
  query GetDogs {
    dogs {
      name
    }
  }
`;

Я заметил, что во многих приложениях есть папка src/graphql с файлами внутри, представляющими ресурс. Так что в этом случае это будет что-то вроде src/graphql/dogs.ts

Тем не менее, я не чувствую, что это имеет смысл, если я пытаюсь настроить свое приложение так, чтобы запросы были совмещены со страницами, потому что все запросы будут специфичными для каждой страницы, что, как мне кажется, и есть весь смысл с помощью GraphQL? Поскольку вся идея состоит в том, чтобы иметь возможность не перегружать поля, которые вы не будете использовать, и размещение их всех в одном файле усложняет задачу и заставляет меня называть такие вещи, как GET_DOGS_1, GET_DOGS_2 и т. д.

Я думаю о чем-то более похожем

src/
  components/
    FooPage/
      queries.ts
      index.tsx
    BarPage/
      queries.ts
      index.tsx
    BazPage/
      queries.ts
      index.tsx

Сюда:

  1. Все страницы смогут указать поля, которые они хотят, и не будут перегружаться.
  2. Не будет конфликта имен, и все страницы могут просто назвать свои соответствующие запросы GET_DOGS
  3. Он будет совмещен со страницей и будет служить документацией о том, какие поля API необходимы для этой конкретной страницы.
  4. Запросы отделены друг от друга

По вашему экспертному мнению, похоже ли это на типичную структуру GraphQL? Я не понимаю, почему приложения централизуют 1 версию каждого запроса. Я получаю это за мутации, поскольку обычно есть только один способ POST/создать данные. Заранее спасибо.

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
Что такое Apollo Client и зачем он нужен?
Что такое Apollo Client и зачем он нужен?
Apollo Client - это полнофункциональный клиент GraphQL для JavaScript-приложений, который упрощает получение, управление и обновление данных в...
0
0
157
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Централизация всех операций GraphQL или нет — выбор дизайна для вас и вашей команды при работе над проектом.

Некоторым командам удобнее иметь все операции в одном месте. Другие команды считают, что операции лучше располагать «рядом» с компонентами/страницами, которые их используют. (это можно применить к другим утилитам не только GraphQL)

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

Мнение:

  • Если ваш запрос используется только одним компонентом/страницей, держите его в том же файле или рядом с ним.
  • Если ваш запрос используется несколькими компонентами/страницами, сохраните его на верхнем уровне (src/graphql), чтобы его можно было повторно использовать в вашем приложении.

Другие вопросы по теме