- Notifications
You must be signed in to change notification settings - Fork0
curso-graphQL/2-hola-mundo-graphql
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
- Crear/configurar archivos necesarios
- Instalación de dependencias
- Instalación de dependencias
- Inicializar el servidor express con los ajustes por defecto
- Pasar de Node Express a GraphQL
- Pasar de Node Express a GraphQL
- Generamos el archivopackage.json inciando el proyecto con el comando
npm init. - Generamos el archivotsconfig.json para configurar typeScript mediante el comando
npx tsc --init --rootDir src --outDir build --lib dom,es6 module commonjs --removeComments --target es6
En este proyecto necesitarremos las siguientes dependencias:
- express
- express-graphql
- graphql
- graphql-import-node
- compression
- cors
- typescript
- graphql-tools
- graphql-playground-middleware-express
- nodemon
- ts-node
npm install express express-graphql graphql ncp http graphql-import-node compression cors typescript graphql-tools graphql-playground-middleware-express nodemon ts-node
npm install @types/compression @types/express @types/cors @types/express-graphql @types/node @types/graphql -D
En el archivopackage.json incluimos la siguiente propiedad:
"scripts": {"start":"node build/server.js","build":"tsc -p . && ncp src/schema build/schema","start:dev":"npm run build:dev","build:dev":"nodemon 'src/server.ts' --exec 'ts-node' src/server.ts -e ts.graphql" },
Creamos en la raiz la carpeta src y dentro de ella el archivo server.js (punto de entrada de la aplicación).
Para comprobar que funciona correctamente enserver.js ponemos un console log que podrá verse en la terminal cuando ejecutemosnpm start:dev
importexpressfrom'express';importcompressionfrom'compression';importcorsfrom'cors';constPORT=5300;constapp=express();app.use(cors());app.use(compression());app.use('/',(re,res)=>{res.send('Bienvenido al curso de GraphQL')});app.listen({port:PORT},()=>console.log(`Hola Mundo API GraphQL http://localhost:${PORT}`))
Debemos seguir los siguientes pasos inicialmente en el archivoserver.ts que luego refactorizaremos a nuevos archivos.
- Definimos lostypes:
consttypeDefs = `typeQuery {hola:String!holaConNombre(nombre:String!):String!holaAlCursoGraphQL:String! }`;
- Definimos losresolvers:
constresolvers:IResolvers={Query:{hola():string{return'Hola Mundo';},holaConNombre(__:void,{ nombre}):string{return`Hola Mundo, hola${nombre}`;},holaAlCursoGraphQL():string{return"Hola Mundo al curso GraphQL";}}}
- Relacionamos lostypes con losresolvers
constschema:GraphQLSchema=makeExecutableSchema({ typeDefs, resolvers});
- Modificamos la ruta para utilizar GraphQL. Debemos importar graphQlHTTP para poder utilizarlo.
import{graphqlHTTP}from'express-graphql';app.use('/',graphqlHTTP({ schema,graphiql:true}));
- Refactorización
En src creamos dos nuevos directorios para los resolvers y para el schema.
En el directorio resolvers creamos dos archivos:
- query.ts
import{IResolvers}from'graphql-tools';constquery:IResolvers={Query:{hola():string{return'Hola Mundo';},holaConNombre(__:void,{ nombre}):string{return`Hola Mundo, hola${nombre}`;},holaAlCursoGraphQL():string{return"Hola Mundo al curso GraphQL";}}}exportdefaultquery;
- resolversMap.ts
import{IResolvers}from'graphql-tools';importqueryfrom'./query';constresolvers:IResolvers={ ...query}exportdefaultresolvers;
En el directorio schema creamos dos archivos:
- schema.graphql
typeQuery {hola:String!holaConNombre(nombre:String!):String!holaAlCursoGraphQL:String!}
- index.ts
import{GraphQLSchema}from'graphql';import{makeExecutableSchema}from'graphql-tools';import'graphql-import-node';importtypeDefsfrom'./schema.graphql';importresolversfrom'../resolvers/resolversMap';constschema:GraphQLSchema=makeExecutableSchema({ typeDefs, resolvers});exportdefaultschema;
- Sustituir graphiQL por apollo server
Primero desinstalamos la dependencia de express-graphql
npm uninstall express-graphql
Instalamos la dependencia de apollo server
npm install apollo-server-express
Modificamos el archivoserver.ts para incluir los cambios y utilizar el playground de apollo server
...import{ApolloServer}from'apollo-server-express';import{createServer}from'http';......constserver=newApolloServer({ schema,introspection:true});server.applyMiddleware({ app});consthttpServer=createServer(app);httpServer.listen({port:PORT},()=>console.log(`Hola Mundo API GraphQL http://localhost:${PORT}/graphql`)...
About
Resources
Uh oh!
There was an error while loading.Please reload this page.