Construyendo una query simple con Apollo Server

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

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

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

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

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>

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)