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](https://app.graphqleditor.com/)
- node.js installed [Node.js](https://nodejs.org/en/download)
- install graphql-editor-cli as global library [gecli](https://github.com/graphql-editor/graphql-editor-cli)

If you're done let's begin!

## First things first

Go on [graphqleditor.com](https://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](https://graphqleditor.com/) 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.

```gql
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](https://graphqleditor.com/) CLI library to handle that for us. We'll simply use these two commands to do all the work:

```bash
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:

```ts
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:

```ts
return 'Hello World!';
```

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

```bash
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:

```gql
{
  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](https://graphqleditor.com/) 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](https://github.com/TakSeBiegam/Hello-world-stucco-app/) & [GraphQL Editor](https://app.graphqleditor.com/this-is-my-first-app/hello-world-app).

 GraphQL Hello World app with GraphQL Editor and Stucco.js

Privacy policy

Terms & Conditions

Contact us

Company

Videos

Roadmap

Changelog

Product

Docs

Blog

GraphQL Playground

GraphQL Servers

Resources

GraphQL IDE

GraphQL

GraphQL API

GraphQL Federation

Tutorials

GraphQL Tools

Graph QL

GraphQL Visualisation

About us

Pricing

Community

Zeus

Posts by Arkadiusz Kuryło