Construyendo una query simple con Apollo Server

3/23
Recursos

Aportes 11

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Perfecto, ya lo subio:
Esta es la pagina

https://github.com/jonalvarezz/platzi-graphql-fullstack
yarn --cwd add apollo-server graphql
nodemon ts-node

Es una maravilla lo que hace la flag --cwd, ya que especifica el directorio donde queremos ejecutar alguna opci贸n de yarn

Buenas aqu铆 mi soluci贸n al reto:
1ero cree un archivo ./graphql/schemas.graphql:

type Avocado {
  id: ID!
  name: String!
  description: String!
  image: String
  price: Int
}

input InputAvocado {
  name: String!
  description: String!
  image: String
  price: Int
}

type Query {
  "Devuelve los Avocados"
  getAvos: [Avocado]
  "Devuelve la info del servidor"
  info: String!
}

type Mutation {
  "Crea un Avocado"
  createAvo(input: InputAvocado!): Avocado
}

Luego en index.ts (notes茅 que el newId es literalmente cualquier cosa, para el reto 煤nicamente):

import { ApolloServer } from 'apollo-server';
const { readFileSync } = require('fs');
const { join } = require('path');

const typeDefs = readFileSync(
  join(__dirname, 'graphql', 'schemas.graphql'),
  'utf-8'
);

const avos = [
  {
    id: 1,
    name: 'Avocado 1',
    description: 'Avocado 1 description',
    image: 'https://unsplash.com/640',
    price: 5,
  },
  {
    id: 2,
    name: 'Avocado 2',
    description: 'Avocado 2 description',
    image: 'https://unsplash.com/640',
    price: 7,
  },
  {
    id: 3,
    name: 'Avocado 3',
    description: 'Avocado 3 description',
    image: 'https://unsplash.com/640',
    price: 4,
  },
];

// 2 - resolvers
const resolvers = {
  Query: {
    info: () => `This is the API of Platzi Node GraphQL`,
    getAvos: () => avos,
  },
  Mutation: {
    createAvo: (root: any, { input }: any) => {
      const newId = Math.floor(Math.random() * 100);
      const newAvo = { ...input, id: newId };
      avos.push(newAvo);
      return newAvo;
    },
  },
};

// 3 - iniciar servidor

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

server.listen().then(({ url }) => console.log(`Server is running on${url}`));

Mi soluci贸n basada en los tipos de graphql:
Types:

  • Avocado: id: ID, name: String, sku: String, image: String, price: Float, attributes: AvocadoAttributes.
  • AvocadoAttributes: description: String, shape: String, hardiness: Float, taste: String
  • Cart: id: ID, avocado_id: ID

Query:

  • getAvocados(): [Avocado]

Mutations:

  • createAvocado
  • deleteAvocado (ID)

Al final quedo algo asi, no se mucho de GraphQL pero poco a poco voy entendiendo

Por si alguien al crear el branch se equivoca de nombre lo pueden borrar desde main con este codigo .

git branch -D <name branch>

Para los que como a mi les cueste ver lo que escribe, este es el comando

 yarn --cwd api add apollo-server graphql nodemon ts-node

Con esta a帽ade estes paquetes dentro de la carpeta api

Introducci贸n a GraphQL

Es un paradigma aplicado al intercambio de informaci贸n basada en la definici贸n de una API.

.
A diferencia de una API definida en Rest, con GraphQL permite definir, validar y controlar los errores mediante una especificaci贸n basada en interacciones.
.

Configuraci贸n

馃洜 Repositorio de trabajo - Link

Como se visualiz贸 en clase, definimos ciertas configuraciones de nuestro servidor. Recomiendo, realizar la siguiente configuraci贸n de su servidor de la siguiente manera:

src
  鈹斺攢猥 index.ts  - Archivo inicial de la aplicaci贸n
  鈹斺攢猥 server.ts - Definici贸n del servidor
  鈹斺攢猥 graphql   - Directorio de recursos para GraphQL  
         鈹斺攢猥 index.ts - Archivo inicial de GraphQL

De lo anterior tenemos la siguiente definici贸n:

// src/index.ts
import 'module-alias/register' // Global alias definition
import { version } from '../package.json'  // Version linking
import { PORT, MODE } from '@config/env' // Env. variables

import server from './server'

server.listen({ port: PORT }).then(({ url }) => {
    console.log(`猬 Thingst - ${MODE}`)
    console.log(`鈼 Listening on ${url}`)
    console.log(`鈼 v${version}`)
})
// src/server.ts
import { ApolloServer } from 'apollo-server'

import schema from './graphql/index'

const server = new ApolloServer({ schema, debug: false })

export default server

Aqu铆 se tiene que debug: false debido a que gestionaremos los errores de por default de GraphQL Link.

// src/graphql/index.ts
import { gql } from 'apollo-server'
import { makeExecutableSchema } from '@graphql-tools/schema'
import { merge } from 'lodash'

const Query = gql`
    type Query {
        info: String!
    }
`

const resolvers = {
    Query: {
        info: () => {
            info('GET /api')
            return '猬 Thingst'
        },
    },
}

export default makeExecutableSchema({
    typeDefs: [
        Query,
    ],
    resolvers: merge(resolvers),
})

De lo anterior, como pretendo dividir los archivos en modelos para una arquitectura basada en MVCS (Modelo - Vista- Controlador - Servicio), defino mis schemas de la anterior forma.

Por si quieren iniciar el server desde la ra铆z:

"scripts": {
    "server": "yarn --cwd api nodemon src/index.ts"
  }

Me gust贸 su terminal 鉁

Excelente introducci贸n donde se va tomando su tiempo en varios detalles importantes.

Complemento este video compartiendo el enlace a la documentaci贸n de Apollo Server 馃摎

Para activar el servidor desde yarn

yarn --cwd api dev

Ayuda, el repositorio en github no es publico y no se puede clonar ahora(4-1-22)