How to send GraphQL query in programmatic way

[hyeon]

Intro

In our previous posts, we’ve introduced GraphQL usage on GraphQL playgaound like following image:

But when you’re creating your own mod/plugin, you have to query data from your program, not from GUI playground.
In this article, I’ll show you how to call GQL query in your code.

How to

First of all, we need to know where to query to get our data. We already know the domain of RPC node(http://9c-main-rpc-10.nine-chronicles.com) or data provider(https://api.9c.gg). We usually connected to the playground on web browser routing to /ui/playgound, but for direct query, we have to use /graphql instead. Let’s see the working example written in JS.

// gql.js
// Needs Node 17 or later to use "fetch".
const API_URL = "https://api.9c.gg/graphql";
const query = `
{
  battleArenaInfo {
    championshipId
    round
    arenaType
    startBlockIndex
    endBlockIndex
  }
}
`;

const getArenaInfo = async () => {
  const resp = await fetch(
    API_URL,
    {
      method: "POST",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify({query: query})
    }
  );
  
  if (resp.status === 200) {
    const result = await resp.json();
    console.log(result.data);
  } else {
    const err = await resp.text();
    console.log(`Fetch failed: ${resp.status} :: ${err}`);
  }
};

getArenaInfo();

You can test your own query with changing const query part in this sample. Just copy and paste query contents from GQL playground. That’s it.

As you write your own code, I recommend that you check a few points:

1. Use /graphql endpoint
2. Request with POST method
3. Send JSON contents as request body

Outro

This short article shows how to query data via GraphQL in programmatic way. Now you can get and use real-time data in your own program from Nine Chronicles node.

[yarekeen]

Hi, does battleArenaInfo not work for everyone yet? Or am I doing something wrong?

[hyeon]

@yarekeen
If you want to test on the playground, you have to place your query body into query block.
Please try this:

query {
  battleArenaInfo {
    championshipId
    round
    arenaType
    startBlockIndex
    endBlockIndex
  }
}

You also can check the query schema in SCHEMA tab on your right-hand side label

As you can see, the schema starts with query block.

In the same context, you should send HTTP request body just like {query: *[QUERY_BODY]*}