Implante uma API GraphQL com o MongoDB Atlas e o Apollo Server no Koyeb

Introdução

Requisitos

• Uma máquina de desenvolvimento com Node.js instalado. O aplicativo de demonstração neste tutorial usa a versão 16.14.0 do Node.js
• Uma máquina de desenvolvimento com Git instalado
• Uma conta do MongoDB Atlas
• Uma conta Koyeb para implantar o aplicativo

Etapas

1. Crie um banco de dados MongoDB usando o MongoDB Atlas
2. Configure o projeto
3. Crie um servidor GraphQL usando o Apollo Server
4. Conecte o servidor GraphQL ao banco de dados MongoDB
5. Usar MongoDB como fonte de dados GraphQL
6. Implantar para Koyeb

Crie um banco de dados MongoDB usando o Mongo Atlas

• Clique no botão "Criar" em seu tipo de implantação preferido.
• Selecione um provedor e região de nuvem preferidos ou use as opções pré-selecionadas.
• Digite um nome de cluster ou use o nome de cluster padrão.
• Clique no botão "Criar cluster".
• Selecione a opção de autenticação "Nome de usuário e senha", insira um nome de usuário e senha e clique no botão "Criar usuário". Armazene o nome de usuário e a senha em um local seguro para uso posterior.
• Digite "0.0.0.0/0" sem as aspas no campo Endereço IP da seção Lista de acesso IP e clique no botão "Adicionar entrada".
• Clique no botão "Concluir e Fechar" e depois no botão "Ir para Bancos de Dados". Você será redirecionado para a página "Data Deployments", com seu novo cluster MongoDB agora visível.
• Clique no botão "Conectar" ao lado do nome do cluster MongoDB, selecione a opção "Conectar seu aplicativo" e copie a string de conexão do banco de dados para um local seguro para uso posterior.

Configure o projeto

mkdir graphql_movies

cd graphql_movies
git init

npm init --yes

npm install apollo-server graphql mongoose apollo-datasource-mongodb dotenv rimraf

npm install -D @babel/preset-env @babel/core @babel/node @babel/cli

• apollo-server:uma biblioteca de código aberto para criar servidores GraphQL.
• graphql:a implementação JavaScript da especificação GraphQL.
• mongoose:um mapeador de documentos de objetos para MongoDB.
• apollo-datasource-mongodb:uma biblioteca de fonte de dados Apollo para MongoDB.
• dotenv:uma biblioteca para manipular variáveis ​​de ambiente.
• rimraf:uma biblioteca para executar o UNIX rm -rf comando no Node.js.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": "3.0.0"
      }
    ]
  ]
}

Crie um servidor GraphQL usando o Apollo Server

type Movie {
  _id: ID!
  title: String!
  rating: Float!
  year: Int!
  }

import { gql } from 'apollo-server';

export const typeDefs = gql`
  type Movie {
    _id: ID!
    title: String!
    rating: Float!
    year: Int!
  }

  type Query {
    getMovies: [Movie!]!,
    getMovie(id: ID!): Movie!
  }

  type Mutation {
    createMovie(title: String!, rating: Float!, year: Int!): Movie!
  }
`;

• getMovies :Este campo retorna um array de um ou mais Movie objetos de tipo.
• getMovie :Este campo aceita um ID argumento e retorna um único Movie tipo objeto.

const movies = [{
  _id: "12345",
  title: "Sinder Twindler",
  year: 2022,
  rating: 6.5,
}];

export const resolvers = {
  Query: {
    getMovies: (_root, _args, _context, _info) => {
      return movies;
    },
    getMovie: (_root, { id }, _context, _info) => {
      return movies.find(({ _id }) => _id === id);
    }
  },
  Mutation: {
    createMovie: (_root, args, _context, _info) => {
      const randomId = Math.random().toString().split('.')[1];
      const newMovie = { ...args, _id: randomId }
      movies.push(newMovie);
      return newMovie;
    }
  }
}

• root :este argumento contém os resultados de quaisquer resolvedores executados anteriormente.
• args :este argumento contém os parâmetros para uma consulta GraphQL.
• context :este argumento contém dados/objetos que podem ser acessados/compartilhados nas funções do resolvedor.
• info :este argumento contém informações sobre a consulta ou mutação do GraphQL que está sendo executada.

import { ApolloServer } from 'apollo-server';
import { typeDefs } from './typeDefs'
import { resolvers } from './resolvers'

const server = new ApolloServer({typeDefs, resolvers})

server.listen({ port: process.env.PORT || 4000 }).then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

{
  ...
  "scripts": {
    …
    "start:dev": "babel-node src/index.js"
  },
...
}

npm run start:dev

🚀  Server ready at http://localhost:4000/

query ExampleQuery {
  getMovies {
    _id
    title
    year
    rating
  }
}

Conecte o servidor GraphQL ao banco de dados Mongo

MONGODB_URI="mongodb+srv://<username>:<password>@apollogql-demo.kk9qw.mongodb.net/apollogql-db?retryWrites=true&w=majority"

import 'dotenv/config'
import mongoose from 'mongoose';
import { ApolloServer } from 'apollo-server';

import { typeDefs } from './typeDefs';
import { resolvers } from './resolvers';

const uri = process.env.MONGODB_URI
const main = async () => {
  await mongoose.connect(uri, { useNewUrlParser: true, useUnifiedTopology: true })
};

main()
  .then(console.log('🎉 connected to database successfully'))
  .catch(error => console.error(error));

const server = new ApolloServer({ typeDefs, resolvers })

server.listen({ port: process.env.PORT || 4000 }).then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

🎉 connected to database successfully
🚀  Server ready at http://localhost:4000/

import mongoose from "mongoose";

export const Movie = mongoose.model("Movie", {
  title: String,
  rating: Number,
  year: Number,
});

Use o MongoDB como uma fonte de dados GraphQL

import { MongoDataSource } from 'apollo-datasource-mongodb'

export default class Movies extends MongoDataSource {
  async getMovies() {
    return await this.model.find();
  }

  async getMovie(id) {
    return await this.findOneById(id);
  }

  async createMovie({ title, rating, year }) {
    return await this.model.create({ title, rating, year });
  }
}

import 'dotenv/config'
import mongoose from 'mongoose';
import { ApolloServer } from 'apollo-server';

import { typeDefs } from './typeDefs';
import { resolvers } from './resolvers';
import { Movie as MovieModel } from './models/movie';
import Movies from './dataSources/movies';

const uri = process.env.MONGODB_URI
const main = async () => {
  await mongoose.connect(uri, { useNewUrlParser: true, useUnifiedTopology: true })
};

main()
  .then(console.log('🎉 connected to database successfully'))
  .catch(error => console.error(error));

const dataSources = () => ({
  movies: new Movies(MovieModel),
});

const server = new ApolloServer({ typeDefs, resolvers, dataSources })

server.listen({ port: process.env.PORT || 4000 }).then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

export const resolvers = {
  Query: {
    getMovies: async (_, _args, { dataSources: { movies } }) => {
      return movies.getMovies();
    },
    getMovie: async (_, { id }, { dataSources: { movies } }) => {
      return movies.getMovie(id);
    }
  },
  Mutation: {
    createMovie: async (_, args, { dataSources: { movies } }) => {
      return movies.createMovie(args)
    }
  }
}

Implantar em Koyeb

"scripts": {
  ...
  "prebuild": "rimraf dist && mkdir dist",
  "build": "babel src -d dist",
  "start": "node ./dist/index.js"
  }

• Uma prebuild script para garantir que haja um dist vazio diretório antes do build script é executado.
• Uma build script que transpila todo o código no src diretório para a sintaxe JavaScript ES5 no dist diretório com a ajuda do babel pacote.
• Um start script que inicia o servidor.

git add --all
git commit -m "Complete GraphQL server with MongoDB data source."
git remote add origin [email protected]<YOUR_GITHUB_USERNAME>/<YOUR_REPOSITORY_NAME>.git
git branch -M main
git push -u origin main

• Selecione GitHub como seu método de implantação.
• Na lista suspensa de repositórios, selecione o repositório do GitHub para seu código.
• Selecione a ramificação que você deseja implantar. Por exemplo. main .
• Na seção de variáveis ​​de ambiente, clique no botão adicionar variável de ambiente.
• Selecione o Secret digite, digite MONGODB_URI como a chave e selecione o MONGODB_URI segredo criado anteriormente como o valor.
• Adicione uma variável de ambiente de texto simples com a chave PORT e valor 8080 .
• Dê um nome ao seu aplicativo. Por exemplo. graphql-apollo-server e clique no botão "Criar aplicativo".

Teste sua API GraphQL

Conclusão