Construyendo una query simple con Apollo Server

Clase 3 de 23 • Curso Avanzado de Node.js con GraphQL, Apollo Server y Prisma

Mauricio Combariza

student•

Perfecto, ya lo subio: Esta es la pagina

https://github.com/jonalvarezz/platzi-graphql-fullstack

Francisco Ponce

student•

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

Giuseppe Ramirez

student•

Hola querido amigo :green_heart: ya subí el repo echale un ojito.

Francisco Ponce

student•

¡Mil gracias, Giu!

Le doy una revisada conforme avance el curso, aunque tiene buena pinta.

Mauricio Combariza

student•

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

Luciano Cavallo

student•

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}`));

Marcelo J. Gracia

student•

Que versión tiene el profesor de node en su notebook?, Xq eso hace que graphql no baje la ulitma, en mi caso funcionó con la 15.3.0, no aśi con la 16.0.1 o superior que marca el package.json

Jonathan 🦑 Alvarez

teacher•

Hola hola Marcelo, se hizo en la versión LTS de Node.js 14!

Yeison Antonio Arango Tamayo

student•

Alguien tiene este error?

error graphql@16.2.0: The engine "node" is incompatible with this module. Expected version "^12.22.0 || ^14.16.0 || >=16.0.0". Got "15.13.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

Yeison Antonio Arango Tamayo

student•

Si alguien tuvo este error solo deben cambiar la version de graphql

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

Giuseppe Ramirez

student•

Hola, Yeison. El repo está arriba, mira si al compararlo hay algo que se haya saltado :)

Andrés Esteban Rodríguez Jiménez

student•

Construyendo una query simple con Apollo Server

Actualmente **apollo-server** se encuentra deprecado, en su lugar, debemos instalar el siguiente paquete:

npm install @apollo/server

Ahora, para poder correr nuestro servidor de GraphQL, debemos hacerlo de la siguiente forma:

import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';
const { loadFiles } = require('@graphql-tools/load-files');

const resolvers = {
  Query: {
    info: () => `El servidor envía queries correctamente :3`
  }
}

const listen = async (port?: number):Promise<void> => {
  const server = new ApolloServer({
    typeDefs: await loadFiles('./src/**/*.gql'),
    resolvers
  });

  const { url } = await startStandaloneServer(server, {
    listen: { port: port || 4000 },
  });

  console.log(`🚀  Server ready at: ${url}`);
};

listen();

Ya luego, en nuestro archivo de **schemas.gql** podremos definir ese **typeDefs**, que va a utilizar nuestro servidor. Te lo dejo a ti.

Y así creas tu server en GraphQL.

José Luis Encastin Flores

student•

Por alguna razón no me funcionaba el comando "--cwd" para instalar las dependencias ni para correr el script de api, pero investigando un poco descubrí que se pueden sustituir por laos siguientes comandos:

yarn --cwd api add apollo-server graphql nodemon ts-node => yarn workspace api add pollo-server graphql nodemon ts-node
yarn --cwd api dev => yarn workspace api run dev

Espero les sirva

Miguel Hernández

student•

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

Miguel Hernández

student•

Lo hice basándome en el archivo data.js de la carpeta database del proyecto platzi-nextjs del profe

link

Juan Camilo Cortes

student•

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

git branch -D <name branch>

Miguel Ángel Murillo Ramírez

student•

Es correcto decir que el paquete apollo-server es una alternativa al paquete express-graphql

Jonathan 🦑 Alvarez

teacher•

Lo es. Apollo-server ya trae un Express dentro 😄

José Luis Encastin Flores

student•

Hola, me aparece este error al aplicar: "yarn --cwd api add apollo-server graphql@15.3.0 nodemon ts-node"

Internal Error: ENOENT: no such file or directory, lstat '/Users/macbookair/Desktop/Courses/platzi-fullstack/platzi-graphql-fullstack/api/api'

¿Alguien sabe a què se debe?

Alexander Coronell

student•

Maria Jose Garcia Martinez

student•

vuestro sistema de reproducción de vídeo es si queda colgado muchísimas veces esto es un Samsung Galaxy S23 tengo cobertura 5g pero es muy inestable y cansa muchísimo porque yo los cursos los escucho como si fueran podcast

Jorge Grullon

student•

A alguien mas le salió este error

yarn

yarn install v1.22.21

[1/5] 🔍 Validating package.json...

error platzi-graphql-fullstack@0.1.0: The engine "node" is incompatible with this module. Expected version "14.x". Got "20.10.0"

error Found incompatible module.

info Visit for documentation about this command.

Juan Jose Rivas Álvarez

student•

Muy buenas a todos, al momento de poner yarn en consola me dice que yarn no es un comando el cual se pueda reconocer

Alguien sabe porpque puede pasar eso?

Juan Jose Rivas Álvarez

student•

ya resolvi mi error, tenia que abrirlo desde la consola de git bash no desde la consola de windows. No se si a los demas les funcione pero a mi eso fue lo que hizo que me funcionara

José Luis Encastin Flores

student•

Si al hacer yarn install te aparecen màs de 300 nuevos archivos, son parte de la configuración de yarn, y para evitar subirlos a tu repo puedes añadir las siguientes lineas a tu .gitignore:

yarn

.pnp.* .yarn/* !.yarn/patches !.yarn/plugins !.yarn/releases !.yarn/sdks !.yarn/versions

Emmanuel Rodríguez

student•

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 📚

Gregory Antonio Iscala Caicedo

student•

esa terminal está disponible en Windows?

Emmanuel Rodríguez

student•

Es correcto, la configuración cae sobre WSL mediante zsh + OhMyZsh.

Diego Vergara

student•

Mi solución a la parte de Schemas y Resolvers Github

const typeDefs = `

    type Query {

        info(message:String):String!
        avo(id:ID!):Avo
        avos:[Avo!]!
    }
    type Avo{

        id:String!
        name:String!
        shape:String!
        hardiness:String!
        taste:String!
        description:String!
        sku:String!
        image:String!
        price:Float!
    }

`

// 2 resolvers

const resolvers = {
  Query: {
    info: (_: any, args: any) => `This is my message ${args.message}`,
    avo: (_: any, args: any) => {
        console.log(args.id);
      return {
        id: `${args.id}`,
        name: 'Super avos',
        shape: 'cualquiera',
        hardiness: 'nose',
        taste: 'rico',
        description: 'palta rica',
        sku:"NH#^@",
        image:"https://localhost:4000",
        price:23.3
      }
    },
    avos: (_: any, args: any) => {
      return [
        {
            id: '23ds',
            name: 'Super avos',
            shape: 'cualquiera',
            hardiness: 'nose',
            taste: 'rico',
            description: 'palta rica',
            sku:"NH#^@",
            image:"https://localhost:4000",
            price:23.3
          },
          {
            id: '23dsss23',
            name: 'Super avos',
            shape: 'cualquiera',
            hardiness: 'nose',
            taste: 'rico',
            description: 'palta rica',
            sku:"NH#^@",
            image:"https://localhost:4000",
            price:23.3
          }
      ]
    },
  },
}

José Carlos Quichiz Santome

student•

Para usar los workspaces con NPM, lo usamos de la siguiente manera:

npm [command] --workspace=nombre_workspace

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
}

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}`));

error graphql@16.2.0: The engine "node" is incompatible with this module. Expected version "^12.22.0 || ^14.16.0 || >=16.0.0". Got "15.13.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';
const { loadFiles } = require('@graphql-tools/load-files');

const resolvers = {
  Query: {
    info: () => `El servidor envía queries correctamente :3`
  }
}

const listen = async (port?: number):Promise<void> => {
  const server = new ApolloServer({
    typeDefs: await loadFiles('./src/**/*.gql'),
    resolvers
  });

  const { url } = await startStandaloneServer(server, {
    listen: { port: port || 4000 },
  });

  console.log(`🚀  Server ready at: ${url}`);
};

listen();

const typeDefs = `

    type Query {

        info(message:String):String!
        avo(id:ID!):Avo
        avos:[Avo!]!
    }
    type Avo{

        id:String!
        name:String!
        shape:String!
        hardiness:String!
        taste:String!
        description:String!
        sku:String!
        image:String!
        price:Float!
    }

`

// 2 resolvers

const resolvers = {
  Query: {
    info: (_: any, args: any) => `This is my message ${args.message}`,
    avo: (_: any, args: any) => {
        console.log(args.id);
      return {
        id: `${args.id}`,
        name: 'Super avos',
        shape: 'cualquiera',
        hardiness: 'nose',
        taste: 'rico',
        description: 'palta rica',
        sku:"NH#^@",
        image:"https://localhost:4000",
        price:23.3
      }
    },
    avos: (_: any, args: any) => {
      return [
        {
            id: '23ds',
            name: 'Super avos',
            shape: 'cualquiera',
            hardiness: 'nose',
            taste: 'rico',
            description: 'palta rica',
            sku:"NH#^@",
            image:"https://localhost:4000",
            price:23.3
          },
          {
            id: '23dsss23',
            name: 'Super avos',
            shape: 'cualquiera',
            hardiness: 'nose',
            taste: 'rico',
            description: 'palta rica',
            sku:"NH#^@",
            image:"https://localhost:4000",
            price:23.3
          }
      ]
    },
  },
}

Construyendo una query simple con Apollo Server

Introducción

¿Por qué GraphQL?

Arquitectura backend con Node.js y GraphQL

Construyendo una query simple con Apollo Server

Scalars, filtros y queries avanzadas

Base de datos y ORM

ORMs, Prisma y automatización

Modelando la base datos y schema

Resolvers para mutaciones y filtros

Filtros en Prisma

Paginación y filtros avanzados

Archivos estáticos

Archivos estáticos con Express.js y Apollo Server

Producción

Protección de recursos en GraphQL

Testing

Pruebas End to End: Estrategias y Herramientas Efectivas

Preparando la app para producción

Preparando el servidor para Heroku

Introspección

Bases de datos en producción

Deploying

Próximos pasos

Reto: guestbook

Desventajas de GraphQL

Frameworks de GraphQL

Conectemos el frontend