DEV Community

Junior Nascimento
Junior Nascimento

Posted on

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  
Enter fullscreen mode Exit fullscreen mode

(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
Enter fullscreen mode Exit fullscreen mode

And use the cli to configure:

npx tsc --init
npx eslint --init
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

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

and defining a function to retrieve the data:

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

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();
}
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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

{
  "data": {
    "hello": "Hello World!"
  }
}
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (1)

Collapse
 
michaslas profile image
Michal • Edited

Our primary aim is to assist you in discovering how to use yoga wheel exceptional and unique items that can enhance your life in various ways.