Простой GraphQL-запрос с использованием ExpressJs

Второй аргумент - функция graphqlHTTP, которой мы передадим наш файл схемы, содержащий наш запрос, чтобы express мог взаимодействовать с GraphQL API, второй параметр graphiql - это инструмент, который мы будем использовать для тестирования наших запросов.

В строке 13-15: Это порт, с которого мы будем запускать наш express-сервер.

Итак, давайте теперь перейдем к нашему файлу схемы, создадим папку с именем schema и создадим файл внутри этой папки с именем schema.js.

Вставьте следующий код в файл schema.js:

const graphql = require("graphql");
const {
  GraphQLObjectType,
  GraphQLInt,
  GraphQLString,
  GraphQLSchema,
  GraphQLList,
  GraphQLBoolean,
} = graphql;
const axios = require("axios");

const LaunchType = new GraphQLObjectType({
  name: "Launch",
  fields: () => ({
    id: {type: GraphQLString},
    flight_number: { type: GraphQLInt },
    name: { type: GraphQLString },
    details: { type: GraphQLString },
    success: { type: GraphQLBoolean },
  }),
});

Первые 21 строка нашего кода содержат утверждения оператора импорта. Наша переменная LaunchType - это тип объекта graph, который будет содержать выбранные поля, которые мы хотим получить из нашего вызова API.

Давайте продолжим работу с кодом:

const RootQuery = new GraphQLObjectType({
  name: "RootQueryType",
  fields: {
    launch: {
      type: LaunchType,
      args: { id: { type: GraphQLString } },
      resolve(parent, args) {
        return axios
          .get(`https://api.spacexdata.com/v5/launches/${args.id}`)
          .then((res) => res.data);
      },
    },
    launches: {
      type: new GraphQLList(LaunchType),
      resolve(parent, args) {
        return axios
          .get("https://api.spacexdata.com/v5/launches")
          .then((res) => res.data);
      },
    },
  },
});

Объект RootQuery будет содержать два запроса, которые мы будем делать. Во-первых, мы хотим получить подробную информацию о конкретном запуске, передав id в качестве строки запроса в URL API, а второй запрос - получить подробную информацию обо всех запусках, которые были сделаны.

Итак, для первого запроса launch: мы передали тип "LaunchType", а также "args", который является аргументом/строкой запроса, который мы будем использовать для получения подробной информации о конкретном запуске. В функции resolve мы также передаем два аргумента parent и args, о родительском аргументе мы пока говорить не будем. Внутри функции resolve мы возвращаем данные, полученные в результате запроса конечной точки API.

Второй запрос - launches: если вы заметили, мы использовали тип GraphQLList, потому что мы получаем не одни данные, а несколько, поэтому мы передаем наши результаты в виде списка/массива.

После того как мы закончили писать все функции запросов, мы экспортируем наш файл схемы, чтобы использовать его в нашем файле app.js.

Поэтому включите этот код в файл schema.js:

module.exports = new GraphQLSchema({
  query: RootQuery,
});

Теперь мы можем проверить наши запросы, зайдя в терминал и выполнив команду:

В терминале должно появиться Started server on port 4000.

Теперь откройте браузер и перейдите на localhost:4000/graphql, если вы помните, это конечная точка, которую мы создали для нашего GraphQL API.

В браузере вы должны увидеть что-то вроде этого:

Это graphiql, инструмент, который мы будем использовать для тестирования наших конечных точек:

Итак, давайте получим подробную информацию обо всех запусках, которые были произведены SpaceX:

Копируем id любых данных, затем используем его для второго запроса, чтобы получить детали отдельного запуска.

Итак, мы успешно выполнили наши запросы и получили желаемый результат.

Ссылка на исходный код:

Заключение

В этом руководстве мы сделали API запрос к внешнему API, мы также можем использовать GraphQL для получения данных из JSON файла в нашем проекте, а также для более продвинутых функций.

Если вы хотите узнать больше о GraphQL, воспользуйтесь разделом комментариев, чтобы рассказать мне, о чем бы вы хотели, чтобы я написал дальше, вы также можете посмотреть мои предыдущие статьи, они вам понравятся.

Спасибо до следующего раза.