DEV Community

Cover image for Beginners Guide to communication with GraphQL Server in Javascript with Pokemon Schema
Artur Czemiel for GraphQL Editor

Posted on • Updated on

Beginners Guide to communication with GraphQL Server in Javascript with Pokemon Schema

First of all, I want to tell you I created the tool graphql-zeus it is GraphQL client on top of the fetch function. What it means? Basically, you point Zeus to the GraphQL schema and it generates libraries for you.

Sounds fun? It is even more fun because you don't have to know gql the query language of GraphQL because Zeus provides you with its own GraphQL query like autocompleted syntax.

Create a project folder:

mkdir zeus-tutorial
cd zeus-tutorial
Enter fullscreen mode Exit fullscreen mode

Let's start then. First, you will have to init a new npm package:

npm init
Enter fullscreen mode Exit fullscreen mode

click enter enter enter etc.

Install dev dependencies.

npm i -D @babel/core @babel/node @babel/preset-env
Enter fullscreen mode Exit fullscreen mode

Install dependencies.

npm i node-fetch
Enter fullscreen mode Exit fullscreen mode

Then Create .babelrc file

echo '{ "presets": ["@babel/preset-env"] }' >> .babelrc
Enter fullscreen mode Exit fullscreen mode

Then Create the src directory

mkdir src
Enter fullscreen mode Exit fullscreen mode

and create a index.js file

touch src/index.js
Enter fullscreen mode Exit fullscreen mode

Add script to your package.json

{
  "scripts": {
    "start": "babel-node src/index.js"
  },
}
Enter fullscreen mode Exit fullscreen mode

Your whole package.json should look like this:

{
  "name": "zeustutorial",
  "version": "1.0.0",
  "description": "",
  "main": "main/index.js",
  "scripts": {
    "start": "babel-node src/index.js"
  },
  "author": "Aexol <aexol@aexol.com> (http://aexol.com)",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/node": "^7.5.5",
    "@babel/preset-env": "^7.5.5"
  },
  "dependencies": {
    "node-fetch": "^2.6.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

Now it is high time to generate some code from GraphQL. Go ahead install graphql-zeus.

install graphql-zeus

npm i -g graphql-zeus
Enter fullscreen mode Exit fullscreen mode

Generate files from pokemon schema

zeus https://graphql-pokemon.now.sh/ ./src
Enter fullscreen mode Exit fullscreen mode

Hurray! You should have definition files generated in ./src folder.
Now go and open some editor of choice - I prefer VSCode but it is up to you. I can guarantee it works with VSCode though.

Open package directory with editor. Open src/index.js
In the first part of the series, we will write simple query loading first ten pokemon names and images and display it in the terminal.

import { Chain } from "./graphql-zeus";

const chain = Chain("https://graphql-pokemon.now.sh");

const run = async () => {
  const { pokemons } = await chain.Query({
    pokemons: [
      {
        first: 10
      },
      {
        name: true,
        image: true
      }
    ]
  });
  console.log(pokemons);
  return pokemons;
};
run();

Enter fullscreen mode Exit fullscreen mode

In zeus everything is typed so when you write chain. You should see Query and when you open {} parentheses you should see all the possible queries.

In zeus everything is autocompleted so you don't have to learn gql syntax.

And run it with being in the project folder

npm run start
Enter fullscreen mode Exit fullscreen mode

You should see the first ten pokemon in the output! Congratulations you've just done your first GraphQL query.

Support

If you want to support me creating graphql-zeus visit

GitHub logo graphql-editor / graphql-zeus

GraphQL client and GraphQL code generator with GraphQL autocomplete library generation ⚡⚡⚡ for browser,nodejs and react native ( apollo compatible )

npm Commitizen friendly npm downloads

Strongly Typed GraphQL from the team at GraphQL Editor

How it works

GraphQL Zeus is the absolute best way to interact with your GraphQL endpoints in a type-safe way. Zeus uses your schema to generate Typescript types and strongly typed clients to unlock the power, efficiency, productivity and safety of Typescript on your GraphQL requests.

Features

⚡️ Validates queries and selectors ⚡️ Types mapped from your schema
⚡️ Fetch all primitive fields with one function
⚡️ Works with Apollo Client, React Query, Stucco Subscriptions (*more coming soon...)
⚡️ Works with Subscriptions
⚡️ Infer complex response types
⚡️ Create reusable selection sets (like fragments) for use across multiple queries
⚡️ Supports GraphQL Unions, Interfaces, Aliases and Variables
⚡️ Handles massive schemas
⚡️ Supports Browsers, Node.js and React Native in Javascript and Typescript
⚡️ Schema downloader
⚡️ JSON schema generation

Full documentation

Our full documentation has all the use cases of:

  • scalars

and leave a star. That's it.

Top comments (1)

Collapse
 
carlillo profile image
Carlos Caballero

Good topic 🐒