Композиция GraphQL с фрагментами

Я слишком часто видел, как компоновка GraphQL на стороне клиента выполняется неправильно. Как оказалось, на самом деле в GraphQL встроен тип fragment, который значительно упрощает работу с композицией типов. В этой статье я приведу примеры на Javascript, как если бы мы писали клиентский код на стороне браузера.

Композиция без фрагментов

Вот пример того, как мы могли бы повторно использовать строку GraphQL с традиционной интерполяцией:

const DAYS = `
  monday tuesday wednesday thursday friday saturday sunday
`
const GET_STORE_INFO_QUERY = `
  query {
    getStoreInfo {
      schedule {
        ${DAYS}
      }
    }
  }
`

Это, безусловно, сработает, если мы просто попытаемся использовать его для вызова сервера GraphQL, но в конечном итоге мы столкнемся с некоторыми странными проблемами, если попытаемся использовать какие-либо инструменты статического анализа, такие как graphql-inspector (подробнее об этом позже).

Композиция с фрагментами

Вот тот же пример выше, но с использованием фрагментов:

const DAYS_FRAGMENT = `
  fragment days on Schedule {
    monday tuesday wednesday thursday friday saturday sunday
  }
`
const GET_STORE_INFO_QUERY = `
  ${DAYS_FRAGMENT}
  query {
    getStoreInfo {
      schedule {
        ...days
      }
    }
  }
`

Да, мы по-прежнему используем литералы шаблонов для добавления фрагментов в строку запроса, но это абсолютно правильно и то, как предполагается использовать фрагменты.

Если вы хотите поэкспериментировать с фрагментами на игровой площадке GraphQL, вы можете просто воссоздать выражение в его составной форме:

fragment days on Schedule {
  monday tuesday wednesday thursday friday saturday sunday
}
query {
  getStoreInfo {
    schedule {
      ...days
    }
  }
}

Фрагменты с переменными

Вы даже можете использовать переменные с фрагментами, как и другие типы.

fragment days on Schedule {
  monday tuesday wednesday thursday friday saturday sunday
}
fragment employees on StoreInfo {
  employees(status: $status) {
    id
    name
  }
}
query GetStoreInfo($status: EmployeeStatus = ACTIVE) {
  getStoreInfo {
    schedule {
      ...days
    }
    ...employees
  }
}

Как вы можете видеть в этом примере, фрагменты могут быть запросами или любой другой структурой GraphQL.

Фрагменты — это канонический механизм, предоставляемый GraphQL для составления типов чистыми, пригодными для повторного использования способами. Они дают нам возможность разбивать сложные запросы, сокращать избыточный код и по-прежнему использовать мощные инструменты статического анализа в наших проектах. В следующей статье я продемонстрирую один из таких инструментов, graphql-inspector который может избавить вас от развертывания неработающих запросов в рабочей среде.