Eleo Nona

Eleo Nona

1599201317

GraphQL Codegen For Effortless GraphQL and Typescript

GraphQL Codegen For Effortless GraphQL and Typescript

#graphql #typescript

What is GEEK

Buddha Community

GraphQL Codegen For Effortless GraphQL and Typescript

The Definitive Guide to TypeScript & Possibly The Best TypeScript Book

TypeScript Deep Dive

I've been looking at the issues that turn up commonly when people start using TypeScript. This is based on the lessons from Stack Overflow / DefinitelyTyped and general engagement with the TypeScript community. You can follow for updates and don't forget to ‚ėÖ on GitHub ūüĆĻ

Reviews

  • Thanks for the wonderful book. Learned a lot from it. (link)
  • Its probably the Best TypeScript book out there. Good Job (link)
  • Love how precise and clear the examples and explanations are! (link)
  • For the low, low price of free, you get pages of pure awesomeness. Chock full of source code examples and clear, concise explanations, TypeScript Deep Dive will help you learn TypeScript development. (link)
  • Just a big thank you! Best TypeScript 2 detailed explanation! (link)
  • This gitbook got my project going pronto. Fluent easy read 5 stars. (link)
  • I recommend the online #typescript book by @basarat you'll love it.(link)
  • I've always found this by @basarat really helpful. (link)
  • We must highlight TypeScript Deep Dive, an open source book.(link)
  • Great online resource for learning. (link)
  • Thank you for putting this book together, and for all your hard work within the TypeScript community. (link)
  • TypeScript Deep Dive is one of the best technical texts I've read in a while. (link)
  • Thanks @basarat for the TypeScript Deep Dive Book. Help me a lot with my first TypeScript project. (link)
  • Thanks to @basarat for this great #typescript learning resource. (link)
  • Guyz excellent book on Typescript(@typescriptlang) by @basarat (link)
  • Leaning on the legendary @basarat's "TypeScript Deep Dive" book heavily at the moment (link)
  • numTimesPointedPeopleToBasaratsTypeScriptBook++; (link)
  • A book not only for typescript, a good one for deeper JavaScript knowledge as well. link
  • In my new job, we're using @typescriptlang, which I am new to. This is insanely helpful huge thanks, @basarat! link
  • Thank you for writing TypeScript Deep Dive. I have learned so much. link
  • Loving @basarat's @typescriptlang online book basarat.gitbooks.io/typescript/# loaded with great recipes! link
  • Microsoft doc is great already, but if want to "dig deeper" into TypeScript I find this book of great value link
  • Thanks, this is a great book ūü§ďūü§ď link
  • Deep dive to typescript is awesome in so many levels. i find it very insightful. Thanks link
  • @basarat's intro to @typescriptlang is still one of the best going (if not THE best) link
  •  
  • This is sweet! So many #typescript goodies! link

Get Started

If you are here to read the book online get started.

Translations

Book is completely free so you can copy paste whatever you want without requiring permission. If you have a translation you want me to link here. Send a PR.

Other Options

You can also download one of the Epub, Mobi, or PDF formats from the actions tab by clicking on the latest build run. You will find the files in the artifacts section.

Special Thanks

All the amazing contributors ūüĆĻ

Share

Share URL: https://basarat.gitbook.io/typescript/

Author: Basarat
Source Code: https://github.com/basarat/typescript-book/ 
License: View license

#typescript #opensource 

Elias  Ortiz

Elias Ortiz

1618022940

GraphQL Codegen For Effortless GraphQL and Typescript

GraphQL Codegen For Effortless GraphQL and Typescript

#graphql #typescript

Eleo Nona

Eleo Nona

1599201317

GraphQL Codegen For Effortless GraphQL and Typescript

GraphQL Codegen For Effortless GraphQL and Typescript

#graphql #typescript

Build a GraphQL app in Node.js with TypeScript and graphql-request

In this article, you will build a full-stack app using GraphQL and Node.js in the backend. Meanwhile, our frontend will use the graphql-request library to perform network operations on our backend.

Why use graphql-request and TypeScript?

Whenever developers build a GraphQL server using Apollo, the library generates a ‚Äúfrontend‚ÄĚ which looks like so:

Frontend Developed By GraphQL And Apollo

This interface allows users to make query or mutation requests to the server via code. However, let’s address the elephant in the room: it doesn’t look very user friendly. Since the frontend doesn’t feature any buttons or any helpful interface elements, it might be hard for many users to navigate around your app. Consequently, this shrinks your user base. So how do we solve this problem?

This is where graphql-request comes in. It is an open source library which lets users perform queries on a GraphQL server. It boasts the following features:

  • Lightweight ‚ÄĒ This library is just over 21 kilobytes minified, which ensures your app stays performant
  • Promise-based API ‚ÄĒ This brings in support for asynchronous applications
  • TypeScript support ‚ÄĒ graphql-request is one of many libraries which allows for TypeScript. One major advantage of Typescript is that it allows for stable and predictable code

For example, look at the following program:

let myNumber = 9; //here, myNumber is an integer
myNumber = 'hello'; //now it is a string.
myNumber = myNumber + 10; //even though we are adding a string to an integer,
//JavaScript won't return an error. In the real world, it might bring unexpected outputs.
//However, in Typescript, we can tell the compiler..
//what data types we need to choose.
let myNumber:number = 39; //tell TS that we want to declare an integer.
myNumber = 9+'hello'; //returns an error. Therefore, it's easier to debug the program
//this promises stability and security. 

In this article, we will build a full-stack app using GraphQL and TypeScript. Here, we will use the apollo-server-express package to build a backend server. Furthermore, for the frontend, we will use Next and graphql-request to consume our GraphQL API.

Building our server

Project initialization

To initialize a blank Node.js project, run these terminal commands:

mkdir graphql-ts-tutorial #create project folder 
cd graphql-ts-tutorial 
npm init -y #initialize the app

When that’s done, we now have to tell Node that we need to use TypeScript in our codebase:

#configure our Typescript:
npx tsc --init --rootDir app --outDir dist --esModuleInterop --resolveJsonModule --lib es6 --module commonjs --allowJs true --noImplicitAny true
mkdir app #our main code folder
mkdir dist #Typescript will use this folder to compile our program.

Next, install these dependencies:

#development dependencies. Will tell Node that we will use Typescript
npm install -d ts-node @types/node typescript @types/express nodemon
#Installing Apollo Server and its associated modules. Will help us build our GraphQL
#server
npm install apollo-server-express apollo-server-core express graphql

After this step, navigate to your app folder. Here, create the following files:

  • index.ts: Our main file. This will execute and run our Express GraphQL server
  • dataset.ts: This will serve as our database, which will be served to the client
  • Resolvers.ts: This module will handle user commands. We will learn about resolvers later in this article
  • Schema.ts: As the name suggests, this file will store the schematics needed to send data to the client

In the end, your folder structure should look like so:

Folder Structure

Creating our database

In this section, we will create a dummy database which will be used to send requested data. To do so, go to app/dataset.ts and write the following code:

let people: { id: number; name: string }[] = [
  { id: 1, name: "Cassie" },
  { id: 2, name: "Rue" },
  { id: 3, name: "Lexi" },
];
export default people;
  • First, we created an array of objects called people
  • This array will have two fields: id of type number, and name of type string

Defining our schema

Here, we will now create a schema for our GraphQL server.

To put it simply, a GraphQL schema is a description of the dataset that clients can request from an API. This concept is similar to that of the Mongoose library.
To build a schema, navigate to the app/Schema.ts file. There, write the following code:

import { gql } from "apollo-server-express"; //will create a schema
const Schema = gql`
  type Person {
    id: ID!
    name: String
  }
  #handle user commands
  type Query {
    getAllPeople: [Person] #will return multiple Person instances
    getPerson(id: Int): Person #has an argument of 'id` of type Integer.
  }
`;
export default Schema; 
//export this Schema so we can use it in our project

Let’s break down this code piece by piece:

  • The Schema variable contains our GraphQL schema
  • First, we created a Person schema. It will have two fields: id of type ID and name of type String
  • Later on, we instructed GraphQL that if the client runs the getAllPeople command, the server will return an array of Person objects
  • Furthermore, if the user uses the getPerson command, GraphQL will return a single Person instance

Creating resolvers

Now that we have coded our schema, our next step is to define our resolvers.
In simple terms, a resolver is a group of functions that generate response for a GraphQL query. In other words, a resolver serves as a GraphQL query handler.
In Resolvers.ts, write the following code:

import people from "./dataset"; //get all of the available data from our database.
const Resolvers = {
  Query: {
    getAllPeople: () => people, //if the user runs the getAllPeople command
    //if the user runs the getPerson command:
    getPerson: (_: any, args: any) => { 
      console.log(args);
      //get the object that contains the specified ID.
      return people.find((person) => person.id === args.id);
    },
  },
};
export default Resolvers;
  • Here, we created a Query object that handles all the incoming queries going to the server
  • If the user executes the getAllPeople command, the program will return all the objects present in our database
  • Moreover, the getPerson command requires an argument id. This will return a Person instance with the matching ID
  • In the end, we exported our resolver so that it could be linked with our app

Configuring our server

We’re almost done! Now that we have built both our schema and resolver, our next step is to link them together.

In index.js, write this block of code:

import { ApolloServer } from "apollo-server-express";
import Schema from "./Schema";
import Resolvers from "./Resolvers";
import express from "express";
import { ApolloServerPluginDrainHttpServer } from "apollo-server-core";
import http from "http";

async function startApolloServer(schema: any, resolvers: any) {
  const app = express();
  const httpServer = http.createServer(app);
  const server = new ApolloServer({
    typeDefs: schema,
    resolvers,
    //tell Express to attach GraphQL functionality to the server
    plugins: [ApolloServerPluginDrainHttpServer({ httpServer })],
  }) as any;
  await server.start(); //start the GraphQL server.
  server.applyMiddleware({ app });
  await new Promise<void>((resolve) =>
    httpServer.listen({ port: 4000 }, resolve) //run the server on port 4000
  );
  console.log(`Server ready at http://localhost:4000${server.graphqlPath}`);
}
//in the end, run the server and pass in our Schema and Resolver.
startApolloServer(Schema, Resolvers);

Let’s test it out! To run the code, use this Bash command:

npx nodemon app/index.ts 

This will create a server at the localhost:4000/graphql URL.

Here, you can see your available schemas within the UI:

Available Schemas Within The UI

This means that our code works!

All of our GraphQL queries will go within the Operation panel. To see it in action, type this snippet within this box:

#make a query:
query {
  #get all of the people available in the server
  getAllPeople {
    #procure their IDs and names.
    id
    name
  }
}

To see the result, click on the Run button:

Run Button For Results

We can even search for a specific entity via the getPerson query:

query ($getPersonId: Int) { #the argument will be of type Integer
  getPerson(id: 1) {
    #get the person with the ID of 1
    name
    id
  }
}

Getperson Query

Creating mutations

In the GraphQL world, mutations are commands that perform side effects on the database. Common examples of this include:

  • Adding a user to the database ‚ÄĒ When a client signs up for a website, the user performs a mutation to save their data in their database
  • Editing or deleting an object ‚ÄĒ If a user modifies or removes data from a database, they are essentially creating a mutation on the server

To handle mutations, go to your Schema.ts module. Here, within the Schema variable, add the following lines of code:

const Schema = gql`
  #other code..
  type Mutation {
    #the addPerson commmand will accept an argument of type String.
    #it will return a 'Person' instance. 
    addPerson(name: String): Person
  }
`;

Our next step is to create a resolver to handle this mutation. To do so, within the Resolvers.ts file, add this block of code:

const Resolvers = {
  Query: {
    //..further code..
  },
  //code to add:
  //all our mutations go here.
  Mutation: {
    //create our mutation:
    addPerson: (_: any, args: any) => {
      const newPerson = {
        id: people.length + 1, //id field
        name: args.name, //name field
      };
      people.push(newPerson);
      return newPerson; //return the new object's result
    },
  },
};
  • The addPerson mutation accepts a name argument
  • When a name is passed, the program will create a new object with a matching name key
  • Next, it will use the push method to add this object to the people dataset
  • Finally, it will return the new object‚Äôs properties to the client

That’s it! To test it out, run this code within the Operations window:

#perform a mutation on the server
mutation($name: String) {
  addPerson(name:"Hussain") { #add a new person with the name "Hussain"
    #if the execution succeeds, return its 'id' and 'name` to the user.
    id
    name
  }
}

Addperson

Let’s verify if GraphQL has added the new entry to the database:

query {
  getAllPeople { #get all the results within the 'people' database. 
  #return only their names
  name 
  }
}

Verify That GraphQL Added A New Entry

Building our client

We have successfully built our server. In this section, we will build a client app using Next that will listen to the server and render data to the UI.

As a first step, initialize a blank Next.js app like so:

npx create-next-app@latest graphql-client --ts
touch constants.tsx #our query variables go here.

To perform GraphQL operations, we will use the graphql-request library. This is a minimal, open source module that will help us make mutations and queries on our server:

npm install graphql-request graphql
npm install react-hook-form #to capture user input

Creating query variables

In this section, we will code our queries and mutations to help us make GraphQL operations. To do so, go to constants.tsx and add the following code:

import { gql } from "graphql-request";
//create our query
const getAllPeopleQuery = gql`
  query {
    getAllPeople { #run the getAllPeople command
      id
      name
    }
  }
`;
//Next, declare a mutation
const addPersonMutation = gql`
  mutation addPeople($name: String!) {
    addPerson(name: $name) { #add a new entry. Argument will be 'name'
      id
      name
    }
  }
`;
export { getAllPeopleQuery, addPersonMutation };
  • In the first part, we created the getAllPeopleQuery variable. When the user runs this query, the program will instruct the server to get all the entries present in the database
  • Later on, the addPerson mutation tells GraphQL to add a new entry with its respected name field
  • In the end, we used the export keyword to link our variables with the rest of the project

Performing queries

In pages/index.ts, write the following code:

import type { NextPage, GetStaticProps, InferGetStaticPropsType } from "next";
import { request } from "graphql-request"; //allows us to perform a request on our server
import { getAllPeopleQuery } from "../constants"; 
import Link from "next/link";
const Home: NextPage = ({
  result, //extract the 'result' prop 
}: InferGetStaticPropsType<typeof getStaticProps>) => {
  return (
    <div className={styles.container}>
      {result.map((item: any) => { //render the 'result' array to the UI 
        return <p key={item.id}>{item.name}</p>;
      })}
    <Link href="/addpage">Add a new entry </Link>
    </div>
  );
};
//fetch data from the server
export const getStaticProps: GetStaticProps = async () => {
  //the first argument is the URL of our GraphQL server
  const res = await request("http://localhost:4000/graphql", getAllPeopleQuery);
  const result = res.getAllPeople;
  return {
    props: {
      result,
    }, // will be passed to the page component as props
  };
};
export default Home;

Here is a breakdown of this code piece by piece:

  • In the getStaticProps method, we instructed Next to run the getAllPeople command on our GraphQL server
  • Later on, we returned its response to the Home functional component. This means that we can now render the result to the UI
  • Next, the program used the map method to render all of the results of the getAllPeople command to the UI. Each paragraph element will display the name fields of each entry
  • Furthermore, we also used a Link component to redirect the user to the addpage route. This will allow the user to add a new Person instance to the table

To test out the code, run the following terminal command:

npm run dev

This will be the result:

Addpage Route

Our GraphQL server even updates in real time.

GraphQL Updating In Real Time

Performing mutations

Now that we have successfully performed a query, we can even perform mutations via the graphql-request library.

Within your pages folder, create a new file called addpage.tsx. As the name suggests, this component will allow the user to add a new entry to the database. Here, start by writing the following block of code:

import type { NextPage, GetStaticProps, InferGetStaticPropsType } from "next";
import { request } from "graphql-request";
import { addPersonMutation } from "../constants";
const AddPage: NextPage = () => {
  return (
    <div>
      <p>We will add a new entry here. </p>
    </div>
  );
};
export default AddPage;

In this piece of code, we are creating a blank page with a piece of text. We are doing this to ensure whether our URL routing system works.

Creating A Blank Page To Ensure URL Routing Works

This means that we used routing successfully! Next, write this snippet in your addpage.tsx file:

import { useForm } from "react-hook-form";
const { register, handleSubmit } = useForm();
//if the user submits the form, then the program will output the value of their input.
const onSubmit = (data: any) => console.log(data);
return (
  <div>
    <form onSubmit={handleSubmit(onSubmit)}> {/*Bind our handler to this form.*/}
      {/* The user's input will be saved within the 'name' property */}
      <input defaultValue="test" {...register("name")} />
      <input type="submit" />
    </form>
  </div>
);

This will be the output:

 Output

Now that we have successfully captured the user’s input, our last step is to add their entry to the server.

To do so, change the onSubmit handler located in pages/addpage.tsx file like so:

const onSubmit = async (data: any) => {
  const response = await request(
    "http://localhost:4000/graphql",
    addPersonMutation,
    data
  );
  console.log(response);
};
  • Here, we‚Äôre performing a mutation request to our GraphQL server via the request function
  • Furthermore, we also passed in the addPerson mutation command to our request header. This will tell GraphQL to perform the addMutation action on our server

This will be the result:

Result Of Addmutation Action

And we’re done!

Conclusion

Here is the full source code of this project.

In this article, you learned how to create a full-stack app using GraphQL and TypeScript. They both are extremely crucial skills within the programming world since they are in high demand nowadays.

If you encountered any difficulty in this code, I advise you to deconstruct the code and play with it so that you can fully grasp this concept.

Thank you so much for reading! Happy coding!

This story was originally published at https://blog.logrocket.com/build-graphql-app-node-js-typescript-graphql-request/

#graphql #typescript #nodejs 

Saul  Alaniz

Saul Alaniz

1654310400

Cree Una Aplicación GraphQL En Node.js Con TypeScript Y Graphql-reques

En este artículo, creará una aplicación de pila completa utilizando GraphQL y Node.js en el backend. Mientras tanto, nuestro frontend usará la graphql-requestbiblioteca para realizar operaciones de red en nuestro backend.

¬ŅPor qu√© usar graphql-request y TypeScript?

Cada vez que los desarrolladores construyen un servidor GraphQL usando Apollo, la biblioteca genera una "interfaz" que se ve así:

Esta interfaz permite a los usuarios realizar consultas o solicitudes de mutaci√≥n al servidor a trav√©s de un c√≥digo. Sin embargo, hablemos del elefante en la habitaci√≥n: no parece muy f√°cil de usar. Dado que la interfaz no presenta ning√ļn bot√≥n ni ning√ļn elemento de interfaz √ļtil, puede ser dif√≠cil para muchos usuarios navegar por su aplicaci√≥n. En consecuencia, esto reduce su base de usuarios. Entonces, ¬Ņc√≥mo resolvemos este problema?

Aquí es donde graphql-requestentra en juego. Es una biblioteca de código abierto que permite a los usuarios realizar consultas en un servidor GraphQL. Cuenta con las siguientes características:

  • Ligero: esta biblioteca tiene un poco m√°s de 21 kilobytes minimizados, lo que garantiza que su aplicaci√≥n se mantenga en funcionamiento
  • API basada en promesas: esto brinda soporte para aplicaciones as√≠ncronas
  • Compatibilidad con TypeScript: graphql-requestes una de las muchas bibliotecas que permite TypeScript. Una de las principales ventajas de Typescript es que permite un c√≥digo estable y predecible.

Por ejemplo, mira el siguiente programa:

let myNumber = 9; //here, myNumber is an integer
myNumber = 'hello'; //now it is a string.
myNumber = myNumber + 10; //even though we are adding a string to an integer,
//JavaScript won't return an error. In the real world, it might bring unexpected outputs.
//However, in Typescript, we can tell the compiler..
//what data types we need to choose.
let myNumber:number = 39; //tell TS that we want to declare an integer.
myNumber = 9+'hello'; //returns an error. Therefore, it's easier to debug the program
//this promises stability and security. 

En este artículo, crearemos una aplicación de pila completa utilizando GraphQL y TypeScript. Aquí, usaremos el apollo-server-expresspaquete para construir un servidor backend. Además, para la interfaz, usaremos Next y graphql-requestconsumiremos nuestra API GraphQL.

Construyendo nuestro servidor

Inicialización del proyecto

Para inicializar un proyecto Node.js en blanco, ejecute estos comandos de terminal:

mkdir graphql-ts-tutorial #create project folder 
cd graphql-ts-tutorial 
npm init -y #initialize the app

Cuando termine, ahora tenemos que decirle a Node que necesitamos usar TypeScript en nuestra base de código:

#configure our Typescript:
npx tsc --init --rootDir app --outDir dist --esModuleInterop --resolveJsonModule --lib es6 --module commonjs --allowJs true --noImplicitAny true
mkdir app #our main code folder
mkdir dist #Typescript will use this folder to compile our program.

A continuación, instale estas dependencias:

#development dependencies. Will tell Node that we will use Typescript
npm install -d ts-node @types/node typescript @types/express nodemon
#Installing Apollo Server and its associated modules. Will help us build our GraphQL
#server
npm install apollo-server-express apollo-server-core express graphql

Después de este paso, navegue a su appcarpeta. Aquí, crea los siguientes archivos:

  • index.ts: Nuestro archivo principal. Esto ejecutar√° y ejecutar√° nuestro servidor Express GraphQL
  • dataset.ts: Esto servir√° como nuestra base de datos, que se servir√° al cliente
  • Resolvers.ts: Este m√≥dulo manejar√° los comandos del usuario. Aprenderemos sobre los resolutores m√°s adelante en este art√≠culo.
  • Schema.ts: como sugiere el nombre, este archivo almacenar√° los esquemas necesarios para enviar datos al cliente

Al final, la estructura de carpetas debería verse así:

Creando nuestra base de datos

En esta sección, crearemos una base de datos ficticia que se utilizará para enviar los datos solicitados. Para hacerlo, vaya a app/dataset.tsy escriba el siguiente código:

let people: { id: number; name: string }[] = [
  { id: 1, name: "Cassie" },
  { id: 2, name: "Rue" },
  { id: 3, name: "Lexi" },
];
export default people;
  • Primero, creamos una matriz de objetos llamadapeople
  • Esta matriz tendr√° dos campos: idde tipo numbery namede tipostring

Definiendo nuestro esquema

Aquí, ahora crearemos un esquema para nuestro servidor GraphQL.

En pocas palabras, un esquema de GraphQL es una descripción del conjunto de datos que los clientes pueden solicitar desde una API. Este concepto es similar al de la biblioteca Mongoose .
Para crear un esquema, vaya al app/Schema.tsarchivo. Allí escribe el siguiente código:

import { gql } from "apollo-server-express"; //will create a schema
const Schema = gql`
  type Person {
    id: ID!
    name: String
  }
  #handle user commands
  type Query {
    getAllPeople: [Person] #will return multiple Person instances
    getPerson(id: Int): Person #has an argument of 'id` of type Integer.
  }
`;
export default Schema; 
//export this Schema so we can use it in our project

Desglosemos este código pieza por pieza:

  • La Schemavariable contiene nuestro esquema GraphQL
  • Primero, creamos un Personesquema. Tendr√° dos campos: idde tipo IDy namede tipoString
  • M√°s adelante, le indicamos a GraphQL que si el cliente ejecuta el getAllPeoplecomando, el servidor devolver√° una matriz de Personobjetos
  • Adem√°s, si el usuario usa el getPersoncomando, GraphQL devolver√° una sola Personinstancia

Creando resolutores

Ahora que hemos codificado nuestro esquema, nuestro siguiente paso es definir nuestros resolutores.
En términos simples, un resolver es un grupo de funciones que generan una respuesta para una consulta de GraphQL. En otras palabras, un resolver sirve como un controlador de consultas GraphQL.
En Resolvers.ts, escribe el siguiente código:

import people from "./dataset"; //get all of the available data from our database.
const Resolvers = {
  Query: {
    getAllPeople: () => people, //if the user runs the getAllPeople command
    //if the user runs the getPerson command:
    getPerson: (_: any, args: any) => { 
      console.log(args);
      //get the object that contains the specified ID.
      return people.find((person) => person.id === args.id);
    },
  },
};
export default Resolvers;
  • Aqu√≠, creamos un Queryobjeto que maneja todas las consultas entrantes que van al servidor
  • Si el usuario ejecuta el getAllPeoplecomando, el programa devolver√° todos los objetos presentes en nuestra base de datos
  • Adem√°s, el getPersoncomando requiere un argumento id. Esto devolver√° una Personinstancia con el ID coincidente
  • Al final, exportamos nuestro resolver para que pudiera vincularse con nuestra aplicaci√≥n.

Configurando nuestro servidor

¬°Ya casi hemos terminado! Ahora que hemos creado tanto nuestro esquema como nuestro resolutor, nuestro siguiente paso es vincularlos.

En index.js, escribe este bloque de código:

import { ApolloServer } from "apollo-server-express";
import Schema from "./Schema";
import Resolvers from "./Resolvers";
import express from "express";
import { ApolloServerPluginDrainHttpServer } from "apollo-server-core";
import http from "http";

async function startApolloServer(schema: any, resolvers: any) {
  const app = express();
  const httpServer = http.createServer(app);
  const server = new ApolloServer({
    typeDefs: schema,
    resolvers,
    //tell Express to attach GraphQL functionality to the server
    plugins: [ApolloServerPluginDrainHttpServer({ httpServer })],
  }) as any;
  await server.start(); //start the GraphQL server.
  server.applyMiddleware({ app });
  await new Promise<void>((resolve) =>
    httpServer.listen({ port: 4000 }, resolve) //run the server on port 4000
  );
  console.log(`Server ready at http://localhost:4000${server.graphqlPath}`);
}
//in the end, run the server and pass in our Schema and Resolver.
startApolloServer(Schema, Resolvers);

¡Vamos a probarlo! Para ejecutar el código, use este comando Bash:

npx nodemon app/index.ts 

Esto crear√° un servidor en la localhost:4000/graphqlURL.

Aquí puede ver sus esquemas disponibles dentro de la interfaz de usuario:

¡Esto significa que nuestro código funciona!

Todas nuestras consultas de GraphQL irán dentro del panel de Operación . Para verlo en acción, escriba este fragmento dentro de este cuadro:

#make a query:
query {
  #get all of the people available in the server
  getAllPeople {
    #procure their IDs and names.
    id
    name
  }
}

Para ver el resultado, haga clic en el botón Ejecutar :

Incluso podemos buscar una entidad específica a través de la getPersonconsulta:

query ($getPersonId: Int) { #the argument will be of type Integer
  getPerson(id: 1) {
    #get the person with the ID of 1
    name
    id
  }
}

Creando mutaciones

En el mundo de GraphQL, las mutaciones son comandos que tienen efectos secundarios en la base de datos. Ejemplos comunes de esto incluyen:

  • Agregar un usuario a la base de datos: cuando un cliente se registra en un sitio web, el usuario realiza una mutaci√≥n para guardar sus datos en su base de datos
  • Editar o eliminar un objeto: si un usuario modifica o elimina datos de una base de datos, esencialmente est√° creando una mutaci√≥n en el servidor.

Para manejar mutaciones, vaya a su Schema.tsmódulo. Aquí, dentro de la Schemavariable, agregue las siguientes líneas de código:

const Schema = gql`
  #other code..
  type Mutation {
    #the addPerson commmand will accept an argument of type String.
    #it will return a 'Person' instance. 
    addPerson(name: String): Person
  }
`;

Nuestro próximo paso es crear un resolver para manejar esta mutación. Para hacerlo, dentro del Resolvers.tsarchivo, agregue este bloque de código:

const Resolvers = {
  Query: {
    //..further code..
  },
  //code to add:
  //all our mutations go here.
  Mutation: {
    //create our mutation:
    addPerson: (_: any, args: any) => {
      const newPerson = {
        id: people.length + 1, //id field
        name: args.name, //name field
      };
      people.push(newPerson);
      return newPerson; //return the new object's result
    },
  },
};
  • La addPersonmutaci√≥n acepta un nameargumento.
  • Cuando namese pasa a, el programa crear√° un nuevo objeto con una nameclave coincidente
  • A continuaci√≥n, utilizar√° el pushm√©todo para agregar este objeto al conjunto de peopledatos .
  • Finalmente, devolver√° las propiedades del nuevo objeto al cliente.

¡Eso es todo! Para probarlo, ejecute este código dentro de la ventana Operaciones :

#perform a mutation on the server
mutation($name: String) {
  addPerson(name:"Hussain") { #add a new person with the name "Hussain"
    #if the execution succeeds, return its 'id' and 'name` to the user.
    id
    name
  }
}

Verifiquemos si GraphQL ha agregado la nueva entrada a la base de datos:

query {
  getAllPeople { #get all the results within the 'people' database. 
  #return only their names
  name 
  }
}

Construyendo nuestro cliente

Hemos construido con éxito nuestro servidor. En esta sección, crearemos una aplicación cliente usando Next que escuchará al servidor y procesará datos en la interfaz de usuario.

Como primer paso, inicialice una aplicación Next.js en blanco así:

npx create-next-app@latest graphql-client --ts
touch constants.tsx #our query variables go here.

Para realizar operaciones GraphQL, utilizaremos la biblioteca graphql-request . Este es un módulo mínimo y de código abierto que nos ayudará a realizar mutaciones y consultas en nuestro servidor:

npm install graphql-request graphql
npm install react-hook-form #to capture user input

Creación de variables de consulta

En esta sección, codificaremos nuestras consultas y mutaciones para ayudarnos a realizar operaciones GraphQL. Para hacerlo, vaya a constants.tsxy agregue el siguiente código:

import { gql } from "graphql-request";
//create our query
const getAllPeopleQuery = gql`
  query {
    getAllPeople { #run the getAllPeople command
      id
      name
    }
  }
`;
//Next, declare a mutation
const addPersonMutation = gql`
  mutation addPeople($name: String!) {
    addPerson(name: $name) { #add a new entry. Argument will be 'name'
      id
      name
    }
  }
`;
export { getAllPeopleQuery, addPersonMutation };
  • En la primera parte, creamos la getAllPeopleQueryvariable. Cuando el usuario ejecuta esta consulta, el programa le indicar√° al servidor que obtenga todas las entradas presentes en la base de datos.
  • M√°s tarde, la addPersonmutaci√≥n le dice a GraphQL que agregue una nueva entrada con su namecampo respectivo
  • Al final, usamos la exportpalabra clave para vincular nuestras variables con el resto del proyecto.

Realización de consultas

En pages/index.ts, escribe el siguiente código:

import type { NextPage, GetStaticProps, InferGetStaticPropsType } from "next";
import { request } from "graphql-request"; //allows us to perform a request on our server
import { getAllPeopleQuery } from "../constants"; 
import Link from "next/link";
const Home: NextPage = ({
  result, //extract the 'result' prop 
}: InferGetStaticPropsType<typeof getStaticProps>) => {
  return (
    <div className={styles.container}>
      {result.map((item: any) => { //render the 'result' array to the UI 
        return <p key={item.id}>{item.name}</p>;
      })}
    <Link href="/addpage">Add a new entry </Link>
    </div>
  );
};
//fetch data from the server
export const getStaticProps: GetStaticProps = async () => {
  //the first argument is the URL of our GraphQL server
  const res = await request("http://localhost:4000/graphql", getAllPeopleQuery);
  const result = res.getAllPeople;
  return {
    props: {
      result,
    }, // will be passed to the page component as props
  };
};
export default Home;

Aquí hay un desglose de este código pieza por pieza:

  • En el getStaticPropsm√©todo, le indicamos a Next que ejecute el getAllPeoplecomando en nuestro servidor GraphQL
  • Posteriormente, devolvimos su respuesta al Homecomponente funcional. Esto significa que ahora podemos mostrar el resultado en la interfaz de usuario.
  • A continuaci√≥n, el programa us√≥ el mapm√©todo para representar todos los resultados del getAllPeoplecomando en la interfaz de usuario. Cada elemento de p√°rrafo mostrar√° los namecampos de cada entrada
  • Adem√°s, tambi√©n usamos un Linkcomponente para redirigir al usuario a la addpageruta. Esto permitir√° al usuario agregar una nueva Personinstancia a la tabla .

Para probar el código, ejecute el siguiente comando de terminal:

npm run dev

Este ser√° el resultado:

Nuestro servidor GraphQL incluso se actualiza en tiempo real.

Realizando mutaciones

Ahora que hemos realizado con éxito una consulta, incluso podemos realizar mutaciones a través de la graphql-requestbiblioteca.

Dentro de su pagescarpeta, cree un nuevo archivo llamado addpage.tsx. Como sugiere el nombre, este componente permitirá al usuario agregar una nueva entrada a la base de datos. Aquí, comience escribiendo el siguiente bloque de código:

import type { NextPage, GetStaticProps, InferGetStaticPropsType } from "next";
import { request } from "graphql-request";
import { addPersonMutation } from "../constants";
const AddPage: NextPage = () => {
  return (
    <div>
      <p>We will add a new entry here. </p>
    </div>
  );
};
export default AddPage;

En este fragmento de código, estamos creando una página en blanco con un fragmento de texto. Estamos haciendo esto para asegurarnos de que nuestro sistema de enrutamiento de URL funcione.

¡Esto significa que usamos el enrutamiento con éxito! A continuación, escribe este fragmento en tu addpage.tsxarchivo:

import { useForm } from "react-hook-form";
const { register, handleSubmit } = useForm();
//if the user submits the form, then the program will output the value of their input.
const onSubmit = (data: any) => console.log(data);
return (
  <div>
    <form onSubmit={handleSubmit(onSubmit)}> {/*Bind our handler to this form.*/}
      {/* The user's input will be saved within the 'name' property */}
      <input defaultValue="test" {...register("name")} />
      <input type="submit" />
    </form>
  </div>
);

Esta ser√° la salida:

 

Ahora que hemos capturado con √©xito la entrada del usuario, nuestro √ļltimo paso es agregar su entrada al servidor.

Para hacerlo, cambie el onSubmitcontrolador ubicado en pages/addpage.tsxel archivo de esta manera:

const onSubmit = async (data: any) => {
  const response = await request(
    "http://localhost:4000/graphql",
    addPersonMutation,
    data
  );
  console.log(response);
};
  • Aqu√≠, estamos realizando una solicitud de mutaci√≥n a nuestro servidor GraphQL a trav√©s de la requestfunci√≥n
  • Adem√°s, tambi√©n pasamos el addPersoncomando de mutaci√≥n a nuestro encabezado de solicitud. Esto le indicar√° a GraphQL que realice la addMutationacci√≥n en nuestro servidor

Este ser√° el resultado:

¬°Y hemos terminado!

Conclusión

Aquí está el código fuente completo de este proyecto.

En este artículo, aprendió a crear una aplicación completa con GraphQL y TypeScript. Ambas son habilidades extremadamente cruciales dentro del mundo de la programación, ya que tienen una gran demanda en la actualidad.

Si encontró alguna dificultad en este código, le aconsejo que deconstruya el código y juegue con él para que pueda comprender completamente este concepto.

Muchas Gracias Por Leer! ¡Feliz codificación!

Esta historia se publicó originalmente en https://blog.logrocket.com/build-graphql-app-node-js-typescript-graphql-request/

#graphql #typescript #nodejs