Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

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 theofficial 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 calledgraphql-yoga-api

npm init -y
Enter fullscreen modeExit fullscreen mode

(Caution to not make you project namegraphql-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 modeExit fullscreen mode

And use the cli to configure:

npx tsc --initnpx eslint --init
Enter fullscreen modeExit fullscreen mode

Finally we can updatepackage.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 modeExit 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 withnode 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 modeExit 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 modeExit fullscreen mode

First we will define the GraphQL type inindex.ts:

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

and defining a function to retrieve the data:

const resolvers = {  Query: {    hello: () => 'Hello World!',  },};
Enter fullscreen modeExit 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 modeExit fullscreen mode

At this point yourindex.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 modeExit 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 modeExit 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 modeExit fullscreen mode

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

{  "data": {    "hello": "Hello World!"  }}
Enter fullscreen modeExit 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(2)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
michaslas profile image
Michal
  • Joined
• Edited on• Edited

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

CollapseExpand
 
krymancer profile image
Junior Nascimento
I am a programmer and a future computer engineer 💻 passionate about artificial intelligence and science 🔬
  • Location
    Sobral, Brazil
  • Work
    Computer Engineer
  • Joined

Thanks for commenting in my post. I really appreciate any feedback. Seems that the link you sent is broken. I really like GraphQL and yoga seems the nice thing I used in ages.
Normally I like to use dotnet in API's but with for simpler projects the node with yoga can be really easy and fast to setup.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

I am a programmer and a future computer engineer 💻 passionate about artificial intelligence and science 🔬
  • Location
    Sobral, Brazil
  • Work
    Computer Engineer
  • Joined

Trending onDEV CommunityHot

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp