Інструменти для розробників

1. Двигун Apollo Двигун Apollo це найкращий спосіб запуску GraphQL у виробництві. Це шлюз GraphQL,...
2. Установка
3. Конфігурація
4. Apollo Codegen
5. Використання
6. інтроспект-схема
7. генерувати
8. Підтримка шаблону gql
9. Підтримка .graphqlconfig
10. Друкарський текст і потік

Двигун Apollo

Двигун Apollo це найкращий спосіб запуску GraphQL у виробництві. Це шлюз GraphQL, який допомагає вам реалізовувати і запускати GraphQL над REST або будь-яким іншим backend з упевненістю. За допомогою Engine ви отримуєте ряд неймовірних функцій, які допоможуть вам зрозуміти вашу службу GraphQL і зробити її швидшою!

• Покращити час відгуку : за допомогою кешування та збережених запитів
• Визначення та розуміння гарячих точок : з відстеженням продуктивності та з історією
• Слідкуйте за своїм API : із сповіщеннями та регулярними звітами

Apollo Engine може працювати в будь-якому місці вашого сервера GraphQL. Він працює в одному з двох режимів, або як пакет, який ви встановлюєте на сервер Node, або як окремий проксі-сервер, за допомогою якого ви можете працювати з Docker, який працює з будь-якою бібліотекою серверів GraphQL. Ми розробили його для роботи в найскладніших умовах.

Щоб довідатися більше про Apollo Двигун, перевіряють керівництво

The Apollo Client Devtools є розширенням Chrome.

Особливості

Devtools відображаються як вкладка "Apollo" у вашому інспекторі Chrome, поруч із вкладками "Елементи" та "Консоль". Наразі є 3 головні особливості devtools:

• GraphiQL: надсилайте запити до вашого сервера через мережевий інтерфейс Apollo або запитуйте кеш Apollo, щоб побачити, які дані завантажені.
• Нормалізований інспектор магазину: Візуалізуйте ваш магазин GraphQL так, як його бачить клієнт Apollo, і шукайте за іменами полів або значеннями.
• Інспектор спостережуваних запитів: перегляд активних запитів і змінних і пошук відповідних компонентів інтерфейсу.

Здійснюйте запити на будь-який сервер GraphQL вашої програми або на кеш-клієнт Apollo через консоль розробника Chrome. Ця версія GraphiQL використовує мережевий інтерфейс вашої програми, тому не потрібна конфігурація - вона автоматично проходить уздовж відповідних заголовків HTTP і т.д. так само, як і ваша програма Apollo Client.

Перегляньте стан кешу на стороні клієнта як дерево і перевірте всі об'єкти всередині. Візуалізуйте психічна модель кеш Аполлона. Пошук певних ключів і значень у сховищі та вибір шляху до цих клавіш.

Перегляд запитів, які активно переглядаються на будь-якій сторінці. Дивіться, коли вони завантажуються, які змінні вони використовують, і, якщо ви використовуєте React, до якого компонента React приєднано. Незабаром з'явиться кутова підтримка.

Установка

Ви можете встановити розширення за допомогою Веб-магазин Chrome . Якщо ви хочете замість цього встановити локальну версію розширення, перейдіть до розділу Розробка .

Конфігурація

Поки ваша програма знаходиться в режимі Dev, devtools відображатиметься як вкладка "Apollo" у вашому інспекторі chrome. Щоб увімкнути devtools у вашому додатку навіть у виробництві, передайте connectToDevTools: true до конструктора ApolloClient у вашому додатку. Передайте connectToDevTools: false, якщо хочете відключити цю функцію вручну.

Якщо в вашому додатку існує загальне вікно .__ APOLLO_CLIENT__, на консолі Chrome відобразиться вкладка "Apollo". Клієнт Apollo додає цей гачок у вікно автоматично, якщо процес не буде виконаний. Якщо ви хочете використовувати devtools у виробництві, просто вручну підключіть екземпляр клієнта Apollo до вікна .__ APOLLO_CLIENT__ або передайте connectToDevTools: true до конструктора.

Знайдіть додаткову інформацію про вкладення та налагодження в Сторінка Apollo Client DevTools GitHub .

Apollo Codegen

Apollo Codegen є інструментом для створення коду API або типу анотацій на основі схеми GraphQL і документів запитів.

В даний час він генерує код Swift, анотації TypeScript, анотації Flow та код Scala, ми сподіваємося додати підтримку для інших цілей у майбутньому.

Подивитися Apollo iOS деталі про відображення результатів у GraphQL до типів Swift, а також підтримку виконання під час виконання запитів і мутацій. Для Scala див Реалізуйте Apollo Scala.js детальніше про те, як використовувати згенерований код Scala в програмі Scala.js з клієнтом Apollo.

Використання

Якщо ви хочете використовувати apollo-codegen, ви можете встановити команду глобально:

Копіювати

npm install -g apollo-codegen

інтроспект-схема

Метою цієї команди є створення файлу дампа JSON для даної схеми graphql. Вхідну схему можна отримати з віддаленого сервера graphql або з локального файлу. Отриманий файл дампа JSON інтроспекції необхідний як вхідний сигнал для генерувати команду.

Завантажити схему GraphQL, надіславши запит інтроспекції на сервер:

Копіювати

apollo-codegen інтроспект-схема http: // localhost: 8080 / graphql - вихідна схема.json

За допомогою параметра заголовка можна додати додаткові заголовки HTTP до запиту. Наприклад, щоб включити маркер аутентифікації, використовуйте --header "Authorization: Bearer <token>".

Ви можете використовувати небезпечну опцію, щоб ігнорувати будь-які помилки SSL (наприклад, якщо сервер працює з самозаписаним сертифікатом).

Створення JSON інтроспекції схеми GraphQL з локальної схеми GraphQL:

Копіювати

apollo-codegen інтроспект-схема schema.graphql - вихідна схема.json

генерувати

Метою цієї команди є генерування типів для операцій запитів і мутацій, виконаних проти схеми (вона не буде генерувати типи для самої схеми).

Цей інструмент генерує код Swift за замовчуванням з набору визначень запитів у файлах .graphql:

Копіювати

apollo-codegen генерує ** / *. graphql - схема schema.json - output API.swift

Можна також створити анотації типу для TypeScript, Flow або Scala за допомогою параметра --target:

Копіювати

apollo-codegen генерує ** / *. graphql - схема schema.json - наскрізний тип - output operation-result-types.ts apollo-codegen створює ** / *. graphql --schema schema.json --потік цілі - output operation-result-types.flow.js apollo-codegen генерує ** / *. graphql - схема schema.json - націлювання scala - вихідна операція-результат-типи.

Підтримка шаблону gql

Якщо вихідним файлом для генерації є файл javascript або typecript, кодген буде намагатися екстраполювати запити всередині тег gql шаблонів.

Ім'я тегу можна налаштувати за допомогою параметра CLI --tag-name.

Підтримка .graphqlconfig

Замість того щоб використовувати опцію --schema, щоб вказати на вашу схему GraphQL, ви можете вказати її в a .graphqlconfig файл.

У випадку, якщо у файлі .graphqlconfig вказано декілька схем, виберіть, який з них вибрати за допомогою параметра --project-name.

Друкарський текст і потік

При використанні apollo-codegen з Typescript або Flow, не забудьте додати поле __typename introspection до кожного набору вибору в операціях graphql.

Якщо ви використовуєте клієнт, як apollo-client, який робить це автоматично для ваших операцій GraphQL, перейдіть у параметр --addTypename apollo-codegen, щоб переконатися, що генеровані типи та потоки також мають поле __typename. Це необхідно для забезпечення належної підтримки генерації типу для полів GraphQLUnionType і GraphQLInterfaceType.

Чому потрібне поле __typename?

Використовуючи інформацію типу з схеми GraphQL, можна зробити висновок про можливі типи полів. Однак, у випадку з GraphQLUnionType або GraphQLInterfaceType, для цього поля можливі кілька типів. Це найкраще моделюється за допомогою непересічного об'єднання з __typename як дискримінанта.

Наприклад, дано схему:

Копіювати

Інтерфейс Характер {name: String! } тип Людський реалізує Символ {homePlanet: String} типу Droid реалізує Character {primaryFunction: String}

Всякий раз, коли зустрічається поле типу Character, це може бути або Human, або Droid. Об'єкти людини і дроїда матимуть інший набір полів. У коді програми, коли ви взаємодієте з символом, потрібно переконатися, що обробляєте обидва ці випадки.

Враховуючи цей запит:

Копіювати

запит Символи {символи (епізод: NEW_HOPE) {назва ... на людини {homePlanet} ... на Droid {первиннафункція}}}

Apollo Codegen створить тип об'єднання для Character.

Копіювати

тип експорту CharactersQuery = {символів: Array <{__typename: 'Human', ім'я: string, homePlanet:? string} | {__typename: 'Droid', ім'я: string, primaryFunction:? рядок}>}

Цей тип може бути використаний таким чином, щоб забезпечити обробку всіх можливих типів:

Копіювати

Функція CharacterFigures ({символи}: CharactersQuery) {повернення символів. map (character => {switch (символ .__ typename) {case "Human": повернутися <HumanFigure homePlanet = {характер .homePlanet} ім'я = {характер .name} /> випадок "Droid": повернутися <DroidFigure primaryFunction = {символ. primaryFunction} name = {символ .name} />}}); }