Как использовать Apollo Datasource для вызова Rest API - GraphQL

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

Я не буду объяснять весь код, потому что предполагаю, что вы уже знакомы с концепциями GraphQL, а код довольно прост.

Если вы никогда раньше не работали с GraphQL, вот отличное место для начала: https://www.howtographql.com/.

Репозиторий Github: https://github.com/tonsaito/graphql-bff

Шаг 1. Начните новый проект, создав новый каталог.

Мы будем использовать каталог с именем / graphql-bff.

Шаг 2. Инициализируйте свой проект.

npm init

Шаг 3. Установите следующие зависимости

npm install apollo-server
npm install apollo-datasource-rest
npm install graphql-import

Шаг 4. Создание источников данных

Сначала создайте каталог / datasource в корне вашего проекта.

Давайте создадим имитацию источника данных под названием sampleDatasource.js, чтобы проиллюстрировать, как использовать Apollo Datasource Rest.

const { RESTDataSource } = require('apollo-datasource-rest');
class SampleDatasource extends RESTDataSource{
constructor(){
        super();
        this.baseURL = '';
    }
async sampleData(){
        var data = {};
        data["data"] = "Hello World";
        return data;
    }
}
module.exports = SampleDatasource;

Затем давайте создадим источник данных для вызова API-интерфейсов SpaceX Rest, spacexDatasource.js

const { RESTDataSource } = require('apollo-datasource-rest');
class SpaceXDatasource extends RESTDataSource{
constructor(){
        super();
        this.baseURL = 'https://api.spacex.land/rest/'
    }
async rockets(){
        return this.get(`rockets?limit=10&offset=1`);
    }
}
module.exports = SpaceXDatasource;

Шаг 5. сопоставление запросов и типов

в корне вашего проекта создадим файл schema.graphql для сопоставления наших запросов и типов, связанных с нашими вызовами Rest API.

type Query{
    sampleData: SampleData
    rockets: [Rockets]
}
type SampleData{
    data: String!
}
type Rockets{
    id: String!
    name: String!
}

Шаг 6: собираем все вместе

Создайте файл index.js в корне вашего проекта.

const { ApolloServer } = require('apollo-server');
const { importSchema } = require('graphql-import');
const SampleDatasource = require('./datasource/sampleDatasource');
const SpaceXDatasource = require('./datasource/spacexDatasource');
const typeDefs = importSchema('./schema.graphql');
const resolvers = {
    Query: {
        sampleData: (root, _args, { dataSources }) => dataSources.sampleDatasource.sampleData(),
        rockets: (root, _args, { dataSources }) => dataSources.spacexDatasource.rockets()
    }
  };
const server = new ApolloServer({
    typeDefs,
    resolvers,
    dataSources: () => ({
       sampleDatasource: new SampleDatasource(),
       spacexDatasource: new SpaceXDatasource()
    })
  });
server.timeout = 0;
server.listen('9000').then(({ url }) => {
    console.log(`🚀 Server ready at ${url}`)
});

Шаг 7: запуск вашего проекта

Зайдите в терминал и запустите:

node index.js

Шаг 8: использование детской площадки

Откройте браузер и перейдите по адресу http: // localhost: 9000 /.

Вы можете использовать следующий запрос в левой части интерфейса:

query{
  sampleData{
   data
  }
  rockets{
    name
  }
}

Результат должен выглядеть как на картинке ниже:

Я надеюсь, это поможет вам. Если у вас есть какие-либо комментарии, не стесняйтесь комментировать ниже.