GraphQL API with GraphQL Yoga

Graphql Yoga is a batteries included GraphQL Server, and is very easy to getting started with it!

If you are not familiar with GraphQL, you should checkout the official documentation.

But in a nutshell:
"GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools"

The main goal of GraphQL is to fetch that data you need and only it, using the runtime it also possible to fetch multiple resources in one request so compared to REST API you can achive more results with less code.
Other main point in GraphQL is that you define your data using a powerful type system, that is consistent and shared with the clients, so everything is transparent.

First of all we need to create a new node project and configure it.
So make an directory, in my case is called graphql-yoga-api

npm init -y  

(Caution to not make you project name graphql-yoga because it will conflict with some of the packages we will install)

After that i like to use typescript with es-lint so lets install them:

npm i typescript eslint ts-node ts-node-dev cross-env -D

And use the cli to configure:

npx tsc --init
npx eslint --init

Finally we can update package.json and adding some scripts:

"scripts": {
  "dev": "cross-env NODE_ENV=development ts-node-dev --exit-child --respawn src/index.ts",
  "start": "ts-node src/index.ts"
}

No need to worry to much about these commands, but the dev command utiliza cross-env to set the environment variables then call ts-node-dev with respawn on to keep running the project when we are making changes. The start commands simples run typescript directly, if you want you can also compile the project an run with node buld/index.js

Right now its a good time to define the project structure, in this project we will be using this one:

project
├── src
│   └─── index.ts
│
├── ....
└─── tsconfig.json 

The project entry point will be src/index.ts

Now we have to install the GraphQL dependencies:

npm i graphql @graphql-tools/schema @graphql-yoga/node

First we will define the GraphQL type in index.ts:

const typeDefs = /* GraphQL */ `
  type Query {
    hello: String!
  }
`;

and defining a function to retrieve the data:

const resolvers = {
  Query: {
    hello: () => 'Hello World!',
  },
};

Right now we have everything we need for GraphQL , so lets combine the types and resolvers and start the server:

const schema = makeExecutableSchema({typeDefs, resolvers});

async function main() {
  const server = createServer({schema});
  server.start();
}

At this point your index.ts must be like this

import {createServer} from '@graphql-yoga/node';
import {makeExecutableSchema} from '@graphql-tools/schema';

const typeDefs = /* GraphQL */ `
  type Query {
    hello: String!
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello World!',
  },
};

const schema = makeExecutableSchema({typeDefs, resolvers});

async function main() {
  const server = createServer({schema});
  server.start();
}

main();

When you run the project you are going to see a message like this in the console:

[INFO] 08:55:30 ts-node-dev ver. 2.0.0 (using ts-node ver. 10.8.2, typescript ver. 4.7.4)
💡   🧘 Yoga -   Running GraphQL Server at http://127.0.0.1:4000/graphql

If you go to the link, you will see a page with GraphiQL a tool to test and debug the API. To run what we just created type this in the left container, then press the big play button:

query {
  hello
}

once you make the request you should see something like this in the right container:

{
  "data": {
    "hello": "Hello World!"
  }
}

Is done! See, that's easy, now you know the basics of an GraphQL server and can modify the types and resolvers to see what we can achieve with this minimal setup, GraphQL is an amazing tool and have a excellent ecosystem, you should try it!

I will keeping posting about GraphQL so if you want to see more follow me!