Inicialización del Proyecto

Clase 25 de 45 • Curso de GraphQL 2016

Contenido del curso

Conceptos Generales de GraphQL

Construyendo Esquemas a través de Tipos

Las Herramientas de GraphQL

Proyecto

Conclusiones

43
¿Cuándo usar GraphQL?
03:43 min

Contenido Bonus

Tomar examen

Comentarios

Pablo Chiappetti

teacher•

<h3>Un comentario importante:</h3>

El paquete graphql-server-express a partir de su versión 1.0 volvió al nombre original de lanzamiento de apollo-server (link al proyecto). Para tener la última versión (no es necesario, sólo recomendado), pueden no agregar graphql-server-express como dependencia y en su lugar usar apollo-server-express. Es lo único que cambia ya que el modo de usarlo en el resto del curso es exactamente el mismo.

Como referencia, acá les comparto el repositorio de este proyecto en Github, y específicamente este es el commit que tuve que hacer para trabajar con la última versión del servidor… sólo dos líneas de código!

Por último, me gustaría transmitirles que no se molesten por los cambios que puedan llegar a haber desde la grabación del curso hasta ahora… la rápida adaptación al cambio es justamente una de las virtudes más destacadas de un buen desarrollador/a, así que la práctica no viene nada mal!

Saludos 😃

Yesica Lizeth Cortés Pineda

teacher•

Gracias Pablo.

Carlos Rivas

student•

Buenaaa!

Mariano Villarreal

student•

Al día de hoy (17/10/18), esta es la manera de hacerlo

index.js

const express = require('express')
const { ApolloServer } = require('apollo-server-express')

// construye un schema, usando GraphQL
const typeDefs = require('./schema')

// provee resolvers para nuestro esquema
const resolvers = {
    Query: {
        cursos: () => []
    }
}

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

// inicializar express
const app = express()

// aplicar middleware de apollo en express
server.applyMiddleware({
    app
})

// iniciar el servidor
app.listen({
        port: 4000
    }, () =>
    console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`)
)

schema.js

const { gql } = require('apollo-server-express')

// creamos los esquemas
const schema = gql`
    type Curso {
        id: ID!
        titulo: String!
    }

    type Query {
        cursos: [Curso]
    }
`

module.exports = schema

Mariano Villarreal

student•

Mi package.json

{
  "name": "graphql-server-course",
  "version": "0.1.0",
  "description": "graphql server with apollo server",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "apollo",
    "graphql"
  ],
  "author": "mariano villarreal",
  "license": "MIT",
  "dependencies": {
    "apollo-server": "^2.1.0",
    "apollo-server-express": "^2.1.0",
    "body-parser": "^1.18.3",
    "express": "^4.16.4",
    "graphql": "^14.0.2",
    "graphql-tools": "^4.0.1"
  },
  "devDependencies": {
    "eslint": "^5.7.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^7.0.1",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-standard": "^4.0.0"
  }
}

Enzo Aliatis

student•

Me ayudó full tu comentario,
tengo una duda,
¿Como le haría para combinar todos mis schemas en un index?

ejemplo:
en una carpeta schema tener:
index.js
schema1.js
schema2.js

Como, en el index fusiono esos schemas para importarlo como uno en mi index.js del servidor?

Juan David E.R.

student•

Por ejemplo si quiero hacer una implementación con JWT, claro esta que no cualquiera podría acceder los datos, el tema es darle seguridad a la data que solicito como se haría?

Sergio David Serrano Garcés

student•

Misma pregunta.

Billi Ramirez

student•

Hola

Eso puedes hacerlo desde el backend con node.js utilizando distintos paquetes. Adjunto algunos enlaces:

JWT
JWT-Simple
Passportjs

Luego en el cliente (yo ocupo react) consumes la api.

DIEGO ARMANDO PEÑAFIEL CABASCANGO

student•

Hola, adjunto link en el que se puede revisar los cambios a realizar sobre el código, para que apollo-server-express funcione correctamente al 14-04-2019:

jorge ivan reyes valencia

student•

Para las nuevas versiones

index.js

const express = require('express')
const bodyParser = require('body-parser')
const { ApolloServer } = require('apollo-server-express')
const typeDefs = require('./schema')

const app = express()

const resolvers = {
   Query:{
       cursos: ()=>[]
   }
}

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

apollo.applyMiddleware({ app })

const PORT = 5678
app.listen(PORT, ()=>{
   console.log(`Servidor Corriendo en localhost:${PORT}${apollo.graphqlPath}`)
})

schema.js

const { gql } = require('apollo-server-express')

const typeDefs = gql`
    type Curso {
        id: ID!
        titulo: String!
    }

    type Query{
        cursos: [Curso]
    }
`

module.exports = typeDefs

y colocamos yarn add apollo-server-express

Ruben Dario Matos

student•

Wow graphql anda ya por la version 14. Este curso esta super añejo no?..

Gabriel Rios

student•

Para las última versiones (EN-21) para ejecutar un archivo con extension .gql || .graphql seria así (según la versión oficial de graphql-tools) :

const { join } = require('path')
const { loadSchemaSync } = require('graphql-tools')
const { GraphQLFileLoader } = require('graphql-tools')
const { addResolversToSchema } = require('graphql-tools')
const express = require('express')
const { graphqlHTTP } = require('express-graphql')

// Load schema from the file
const schema = loadSchemaSync(join(__dirname, './schema.graphql'), {
    loaders: [
        new GraphQLFileLoader(),
    ]
});

// Write some resolvers
const Cursos = [
    { id: 1, nombre: 'Curso NodeJS', descripcion: "Nuevo curso NodeJS" },
    { id: 1, nombre: 'Curso PHP', descripcion: "Nuevo curso PHP" },
]
const resolvers = {
    Query: {
        Cursos: () => Cursos
    }
};

// Add resolvers to the schema
const schemaWithResolvers = addResolversToSchema({
    schema,
    resolvers,
});

const app = express();

app.use(
    graphqlHTTP({
        schema: schemaWithResolvers,
        graphiql: true,
    })
);

app.listen(3000, () => {
    console.info(`Server listening on 3000`)
})

Si agregas el plugin de VSCode GraphQL, detectará el código.

Alexander Silvera

student•

prefiero utilizar npm para manejar todo el tema de dependencias, me sirve igual para trabajar en este proyecto?? y poder seguir los pasos del profesor??

Diego Forero

Team Platzi•

Si, no vas a tener ningún problema si usas npm

Juan Diego Silva Garcia

student•

Me sorprendió Yarn, creo que me quedó con Yarn xD

Simón Ottoniel González Acosta

student•

Apollo server ha evolucionado mucho a la fecha y ahora se ve mas sencillo iniciar un server con graphql usandolo, toca leer un poco mas porque no entiendo que son los resolvers jejej. Ya proporcionan una interfaz grafica identica a graphiql. Tratare de implementar las proximas clases con esta nueva version.

const { ApolloServer, gql } = require('apollo-server')

const typeDefs = gql`
  type Curso {
    id: ID!,
    titulo: String!
  }

  type Query {
    cursos: [Curso]
  }
`

const resolvers = {
  Query: {
    cursos: () => [],
  },
}

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

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

Carlos David Sanchez Moreno

student•

En WINDOWS 10, si utilizan el anti virus 360 security, requieren desactivarlo durante la instalación, ya que no permite que se escriban los Scripts en el SO, y no podrán ejecutar yarn desde la consola.
PD: también pueden instalar yarn desde npm, con npm install yarn, aunque en mi caso no funciono correctamente, desconozco si fue por el mismo error.

Ruben Dario Matos

student•

Creo que ya no hace falta instalar tantas dependencias. Estuve mirando otro curso de graphql mas actual que este y era solo graphql y express. 😦

Me da tristeza no poder seguir este curso…

Enzo Aliatis

student•

Dejo mi Repo para los que quieren ver el curso en la version 2.0 de apollo server.
Una obsevacion es que no estoy seguro de como modularizar los schemas, la implementación que uso, no estoy muy seguro si es la correcta pero funciona
Github-Repo

Angelo Segura

student•

Para lo que están siguiendo el ejercicios con las últimas versiones, les dejo mi configuración por si les es útil:

//Index.js
const express = require('express')
const { ApolloServer } = require('apollo-server-express')
const typeDefs = require('./schema')

const app = express()

const resolvers = {
    Query:{
        cursos: ()=>[]
    }
}

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

apollo.applyMiddleware({ app })

const PORT = 5678
app.listen(PORT, ()=>{
    console.log(`Servidor Corriendo en localhost:${PORT}${apollo.graphqlPath}`)
})

//schema.js
const { gql } = require('apollo-server-express')

const typeDefs = gql`
    type Curso {
        id: ID!
        titulo: String!
    }

    type Query{
        cursos: [Curso]
    }
`

module.exports = typeDefs

Juan Diego Lopez Triana

student•

Así deje el codigo de mi proyecto para las ultimas versiones de Apollo

index…js

const express = require('express')
const bodyParser = require('body-parser')
const { ApolloServer } = require('apollo-server-express') 

const typeDefs = require('./schema')
const resolvers = require('./resolvers')

const app = express()


app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

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

const PORT = 5678
app.listen(PORT, () => {
  console.log(`🚀 Server running at http://localhost:${5678}${server.graphqlPath}`)
})

schema.js

const { gql } = require('apollo-server-express') 

const typeDefs = gql`
  type Course {
    id: ID!
    title: String!
  }

  type Query {
    courses: [Course]
  }
`

module.exports = typeDefs

resolvers.js

const resolvers = {
  Query: {
    courses: () => []
  }
}

module.exports = resolvers

Armando de jesus santiz lopez

student•

Se puede hacer graphql sin graphql tools y sin graphql server express ? Creo que seria buena ifea aprender graphql a profundidad solo con la libreria graphql

Web User

student•

Hola. Al intentar ejecutar node index.js, me sale el siguiente error:

events.js:183 throw er; // Unhandled 'error' event ^

Error: listen EADDRINUSE :::5678 at Object._errnoException (util.js:992:11) at _exceptionWithHostPort (util.js:1014:20) at Server.setupListenHandle [as _listen2] (net.js:1355:14) at listenInCluster (net.js:1396:12) at Server.listen (net.js:1480:7) at Function.listen (/Applications/MAMP/htdocs/graphQL/proyecto-dos/node_modules/express/lib/application.js:618:24) at Object.<anonymous> (/Applications/MAMP/htdocs/graphQL/proyecto-dos/index.js:22:5) at Module._compile (module.js:652:30) at Object.Module._extensions..js (module.js:663:10) at Module.load (module.js:565:32)

Diego Forero

Team Platzi•

Al parecer otro programa esta usando el puerto y no se puede usar, por eso el error EADDRINUSE, intenta ejecutar el proyecto en otro puerto

Jose R. Torrens Acosta

student•

El uso de yarn es solo para mostrar una alternativa a npm, o hay alguna cosa especifica que se necesita de este manager?

Diego Forero

Team Platzi•

Yarn tiene una característica que no tenia npm (ahora la tiene en la versión 5) que es la creación de un lockfile donde aseguras la versión exacta de tus dependencias para que no tengas problema al distribuir tu proyecto.

Otra característica que tiene yarn es que maneja un cache que hace que la instalación sea un poco más rápida, pero puedes usar cualquiera de los dos sin problema, puedes seguir este curso usando npm solo cuando se corra un comando con yarn reemplazas yarn con npm.

Billi Ramirez

student•

Yarn es un poco más rápido.

Jordi Santamaría Portolés

student•

no entiendo xk no poneis los ; en los fichero javascript, aunque no es obligatorio es totalmente recomenable, que yo sepa afecta a su rendimiento no ponerlos.

Diego Forero

Team Platzi•

El rendimiento no se ve afectado al no ponerlos, igual siempre que minificas archivos para subirlos a producción las librerías de minificado los ponen de forma automática.

José Iván Sandoya

student•

Es simplemente un estilo de programación de cada persona.
El rendimiento sigue siendo el mismo.

Oscar Fernández del Amo

student•

al ejecutar el graphiql me da este error:

Error: Schema must be an instance of GraphQLSchema

A que puede ser debido?

Diego Forero

Team Platzi•

Puede ser que no este bien definido el Schema o que tengas un error de digitación en alguna parte.
Revisa también que graphQL este instalado como dependencia y no como devDependencie.

Julio Yacot

student•

Hola! me pasaba algo similar! el código me devolvía

Error: Schema must be an instance of GraphQLSchema. Also ensure that there are not multiple versions of GraphQL installed in your node_modules directory.

Sin embargo revisando noté que en vez de exportar los Esquemas y la BD así

module.exports = schema

lo estaba haciendo así

exports.module = schema

const express = require('express')
const { ApolloServer } = require('apollo-server-express')

// construye un schema, usando GraphQL
const typeDefs = require('./schema')

// provee resolvers para nuestro esquema
const resolvers = {
    Query: {
        cursos: () => []
    }
}

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

// inicializar express
const app = express()

// aplicar middleware de apollo en express
server.applyMiddleware({
    app
})

// iniciar el servidor
app.listen({
        port: 4000
    }, () =>
    console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`)
)

const { gql } = require('apollo-server-express')

// creamos los esquemas
const schema = gql`
    type Curso {
        id: ID!
        titulo: String!
    }

    type Query {
        cursos: [Curso]
    }
`

module.exports = schema

{
  "name": "graphql-server-course",
  "version": "0.1.0",
  "description": "graphql server with apollo server",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "apollo",
    "graphql"
  ],
  "author": "mariano villarreal",
  "license": "MIT",
  "dependencies": {
    "apollo-server": "^2.1.0",
    "apollo-server-express": "^2.1.0",
    "body-parser": "^1.18.3",
    "express": "^4.16.4",
    "graphql": "^14.0.2",
    "graphql-tools": "^4.0.1"
  },
  "devDependencies": {
    "eslint": "^5.7.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^7.0.1",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-standard": "^4.0.0"
  }
}

const express = require('express')
const bodyParser = require('body-parser')
const { ApolloServer } = require('apollo-server-express')
const typeDefs = require('./schema')

const app = express()

const resolvers = {
   Query:{
       cursos: ()=>[]
   }
}

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

apollo.applyMiddleware({ app })

const PORT = 5678
app.listen(PORT, ()=>{
   console.log(`Servidor Corriendo en localhost:${PORT}${apollo.graphqlPath}`)
})

const { gql } = require('apollo-server-express')

const typeDefs = gql`
    type Curso {
        id: ID!
        titulo: String!
    }

    type Query{
        cursos: [Curso]
    }
`

module.exports = typeDefs

const { join } = require('path')
const { loadSchemaSync } = require('graphql-tools')
const { GraphQLFileLoader } = require('graphql-tools')
const { addResolversToSchema } = require('graphql-tools')
const express = require('express')
const { graphqlHTTP } = require('express-graphql')

// Load schema from the file
const schema = loadSchemaSync(join(__dirname, './schema.graphql'), {
    loaders: [
        new GraphQLFileLoader(),
    ]
});

// Write some resolvers
const Cursos = [
    { id: 1, nombre: 'Curso NodeJS', descripcion: "Nuevo curso NodeJS" },
    { id: 1, nombre: 'Curso PHP', descripcion: "Nuevo curso PHP" },
]
const resolvers = {
    Query: {
        Cursos: () => Cursos
    }
};

// Add resolvers to the schema
const schemaWithResolvers = addResolversToSchema({
    schema,
    resolvers,
});

const app = express();

app.use(
    graphqlHTTP({
        schema: schemaWithResolvers,
        graphiql: true,
    })
);

app.listen(3000, () => {
    console.info(`Server listening on 3000`)
})

const { ApolloServer, gql } = require('apollo-server')

const typeDefs = gql`
  type Curso {
    id: ID!,
    titulo: String!
  }

  type Query {
    cursos: [Curso]
  }
`

const resolvers = {
  Query: {
    cursos: () => [],
  },
}

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

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

//Index.js
const express = require('express')
const { ApolloServer } = require('apollo-server-express')
const typeDefs = require('./schema')

const app = express()

const resolvers = {
    Query:{
        cursos: ()=>[]
    }
}

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

apollo.applyMiddleware({ app })

const PORT = 5678
app.listen(PORT, ()=>{
    console.log(`Servidor Corriendo en localhost:${PORT}${apollo.graphqlPath}`)
})

//schema.js
const { gql } = require('apollo-server-express')

const typeDefs = gql`
    type Curso {
        id: ID!
        titulo: String!
    }

    type Query{
        cursos: [Curso]
    }
`

module.exports = typeDefs

const express = require('express')
const bodyParser = require('body-parser')
const { ApolloServer } = require('apollo-server-express') 

const typeDefs = require('./schema')
const resolvers = require('./resolvers')

const app = express()


app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

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

const PORT = 5678
app.listen(PORT, () => {
  console.log(`🚀 Server running at http://localhost:${5678}${server.graphqlPath}`)
})

Inicialización del Proyecto

Conceptos Generales de GraphQL

Por qué aprender GraphQL

Orígenes de GraphQL

GraphQL vs REST

Construyendo Esquemas a través de Tipos

El Schema - Types

Scalars

Objects

Enum

Interface

Union

Modificadores de tipo

Root Type: Query

Root Type: Mutation

Las Herramientas de GraphQL

Aclaración antes de empezar éste modulo

La Interfaz de GraphiQL

Queries

Argumentos

Variables

Aliases

Fragments

Inline Fragments

Directives

Mutations

Input Types

Proyecto

Presentación del Proyecto