GraphQL Hello World app with GraphQL Editor and Stucco.js

GraphQL is a query language for APIs that resolves the common REST problem of over- & under-fetching data. It does that by allowing users to request only the exact data they need by specifying that in a single customizable query. Additionally it also provides easy introspection which lets users explore what query and data is available from the API. On top of that GraphQL does not care about API versioning at all - since users can tailor their query to get exactly what they want the API version doesn't even matter.

Before we start

We're going to be using two GraphQL tools for this simple tutorial app:

GraphQL Editor: a feature rich platform for all things GraphQL - from schema design and documentation to code generation and deployment. Simply put it's everything you need to build a robust GraphQL API.
Stucco.js: a GraphQL backend runtime that makes it easy to develop and deploy GraphQL APIs. It relies on the Golang Stucco library and handles communication between our resolvers and the outside world.

Before we go ahead we need to do a bit of a set up - first make sure you have:

an account on GraphQL Editor website
node.js installed Node.js
install graphql-editor-cli as global library gecli

If you're done let's begin!

First things first

Go on graphqleditor.com log in and create your first workspace. Workspaces are groups of projects shared among any number of team members who you can easily follow and collaborate with. For now you can skip adding members since we wont be needing any help with our simple tutorial app. Remember that you can add them later at any point, and collaborating is what GraphQL Editor is all about!

The next step is creating our project, so click new project, name it something like Hello-world-app (or whatever else you prefer). Now that we have our project set up just copy the simple schema codeblock below and paste it into your code area.

type Query {
  helloworld: String!
}

schema {
  query: Query
}

The schema is the first step for every GraphQL project - it defines the types of data that your GraphQL API can return. Now that we have it defined we can go ahead and start developing our resolvers!

We're not going to waste time writing resolvers ourselves since we have installed the GraphQL Editor CLI library to handle that for us. We'll simply use these two commands to do all the work:

gecli create backend
gecli codegen resolve

The first command gecli create backend is used for setup. It will create the basic file structure for your backend (node_modules, schema.graphql, tsconfig.json etc) install packages, log in and fetch the schema from the GraphQL Editor project.

After that is done we need to run the second one gecli codegen resolve it will detect the query and create a resolver for it in .ts file format (ie. helloworld.ts).

The code in that file defines the resolver for our helloworld query which is simply a function that returns the data requested by the query and will look like this:

import { FieldResolveInput } from 'stucco-js';
import { resolverFor } from '../zeus/index.js';

export const handler = async (input: FieldResolveInput) =>
  resolverFor('Query', 'Helloworld', async (args) => {})(input.arguments);

We can now set up our return code, since we want it to actually respond with something. So for this let's add this snippet as our return argument:

return 'Hello World!';

Now to start the server, we need to run the following command in our terminal:

npm run start

Open your browser and type in localhost:8080/graphql, as you see - you just created your first backend application!

To test the resolver, enter the following query into the left-hand side panel:

{
  Helloworld
}

All that's left is to click the run icon, once we receive our message its obvious that everything works!

Conclusion

In this short blogpost we've gone over creating a simple Hello World app with GraphQL Editor and Stucco.js. We also learned how to generate resolvers using the gecli command and how to test the resolvers using the GraphQL Editor website. Obviously this is just a very simple, basic app and you can do much bigger things with Stucco and GraphQL Editor (just check out our repos on git hub to see some examples). If you want to play around with this tutorial project check our it out on Github & GraphQL Editor.