Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Construyendo una query simple con Apollo Server

3/23
Recursos

Aportes 18

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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

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

Por alguna raz贸n no me funcionaba el comando 鈥溾揷wd鈥 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

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>

A alguien mas le sali贸 este error yarn yarn install v1.22.21 \[1/5] 馃攳 Validating package.json... error [email protected]: The engine "node" is incompatible with this module. Expected version "14.x". Got "20.10.0" error Found incompatible module. info Visit <https://yarnpkg.com/en/docs/cli/install> for documentation about this command.

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?

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.

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

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 馃摎

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
          }
      ]
    },
  },
}

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

npm [command] --workspace=nombre_workspace

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"
  }

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)