Transformation from a graphql query to a json query

Question

Transformation from a graphql query to a json query

In exploring the GraphQL example, I am wondering how to make a similar request with JSON in Javascript.

The GraphQL query in the example is:

{
  trip(
    from: {place: "NSR:StopPlace:5533" },
    to: {place:"NSR:StopPlace:5532"}
  ) 
    {
    tripPatterns{duration}
  } 
}

As per the documentation, the URL for querying is .

Here is my attempt in Javascript:

var url = "https://api.entur.io/journey-planner/v2/graphql";

var tripquery = 
{
    trip: 
    {
        __args: {
            from : {place :"NSR:StopPlace:5533" },
            to : {place :"NSR:StopPlace:5532" }                     
        },
        tripPatterns: {
            duration : true             
        }
    }
};

function jsonQuery(){

    var qry = JSON.stringify(tripquery);
    var url_qry = url + "?query=" + qry;

    var xhttp = new XMLHttpRequest();
    xhttp.open("POST", url_qry, true);
    xhttp.setRequestHeader("Content-Type", "application/json");

    xhttp.onreadystatechange = function(){
        console.log("onreadystatechange");
        if(xhttp.readyState === 4 && xhttp.status === 200){
            console.log("json-query-OK");
            console.log(xhttp.responseText);
        }
        else{
            console.log("xhttp.status      : " + xhttp.status);
            console.log("xhttp.statusText  : " + xhttp.statusText);
            console.log("xhttp.readyState  : " + xhttp.readyState);
            console.log("xhttp.responseType: " + xhttp.responseType);
            console.log("xhttp.responseText: " + xhttp.responseText);
            console.log("xhttp.responseURL : " + xhttp.responseURL);
            console.log("json-not-ok");
        }
    };



    xhttp.send();
    console.log("query sent");
}

The mentioned code will produce the following output in the console:

query sent
api.entur.io/journey-planner/v2/graphql?query={%22trip%22:{%22__args%22:{%22from%22:{%22place%22:%22NSR:StopPlace:5533%22},%22to%22:{%22place%22:%22NSR:StopPlace:5532%22}},%22tripPatterns%22:{%22duration%22:true}}}:1 POST https://api.entur.io/journey-planner/v2/graphql?query={%22trip%22:{%22__args%22:{%22from%22:{%22place%22:%22NSR:StopPlace:5533%22},%22to%22:{%22place%22:%22NSR:StopPlace:5532%22}},%22tripPatterns%22:{%22duration%22:true}}} 400 (Bad Request)
query.js:29 onreadystatechange
query.js:35 xhttp.status      : 400
query.js:36 xhttp.statusText  : Bad Request
query.js:37 xhttp.readyState  : 2
query.js:38 xhttp.responseType: 
query.js:39 xhttp.responseText: 
query.js:40 xhttp.responseURL : https://api.entur.io/journey-planner/v2/graphql?query={%22trip%22:{%22__args%22:{%22from%22:{%22place%22:%22NSR:StopPlace:5533%22},%22to%22:{%22place%22:%22NSR:StopPlace:5532%22}},%22tripPatterns%22:{%22duration%22:true}}}
query.js:41 json-not-ok
query.js:29 onreadystatechange
query.js:35 xhttp.status      : 400
query.js:36 xhttp.statusText  : Bad Request
query.js:37 xhttp.readyState  : 3
query.js:38 xhttp.responseType: 
query.js:39 xhttp.responseText: No query found in the body
query.js:40 xhttp.responseURL : https://api.entur.io/journey-planner/v2/graphql?query={%22trip%22:{%22__args%22:{%22from%22:{%22place%22:%22NSR:StopPlace:5533%22},%22to%22:{%22place%22:%22NSR:StopPlace:5532%22}},%22tripPatterns%22:{%22duration%22:true}}}
query.js:41 json-not-ok
query.js:29 onreadystatechange
query.js:35 xhttp.status      : 400
query.js:36 xhttp.statusText  : Bad Request
query.js:37 xhttp.readyState  : 4
query.js:38 xhttp.responseType: 
query.js:39 xhttp.responseText: No query found in the body
query.js:40 xhttp.responseURL : https://api.entur.io/journey-planner/v2/graphql?query={%22trip%22:{%22__args%22:{%22from%22:{%22place%22:%22NSR:StopPlace:5533%22},%22to%22:{%22place%22:%22NSR:StopPlace:5532%22}},%22tripPatterns%22:{%22duration%22:true}}}
query.js:41 json-not-ok

The __args in the Json object is a part I got from an online example, but it's still unclear to me how it functions.

I might need to refine my search queries, as I haven't been able to find a detailed explanation on how to translate a GraphQL query to a JSON object.

javascript json graphql

Answer 1

Answer №1

I encountered a similar issue, and here is how I solved it:

{
  c_con_tic_PTF(dz: CR, docmanId: 123) {
    docmanId
    dz
    data
  }
}

To execute this request as a curl command in macOS, you can refer to this guide: How to use CURL in macOS:

curl \
      -X POST \
      -H "Content-Type: application/json" \
      --data '{ "query": "{  c_con_tic_PTF(docmanId: 123, dz: CR) { docmanId, dz, data }}" }' \

   *my-graphicQL endpoint url*

By following these steps, I successfully obtained the desired response.

If you aim to create a similar graphQL query, you can structure it like this:

{ "query": "{  cz_atlascon_etic_PTF(docmanId: 123, dz: CR) { docmanId, dz, data }}" }

To send the request using JavaScript, simply follow the same format. To offer additional assistance, here is how I executed the request in Java:

HttpRequest mainRequest =
HttpRequest.newBuilder()
.uri(URI.create("my graphQL endpoint"))
.POST(HttpRequest.BodyPublishers.ofString("{ \"query\": \"{  c_con_tic_PTF(docmanId: 123, dz: CR) { docmanId, dz, data }}\" }"))
.build();

Answer 2

I encountered a similar issue, and here is how I solved it:

{
  c_con_tic_PTF(dz: CR, docmanId: 123) {
    docmanId
    dz
    data
  }
}

To execute this request as a curl command in macOS, you can refer to this guide: How to use CURL in macOS:

curl \
      -X POST \
      -H "Content-Type: application/json" \
      --data '{ "query": "{  c_con_tic_PTF(docmanId: 123, dz: CR) { docmanId, dz, data }}" }' \

   *my-graphicQL endpoint url*

By following these steps, I successfully obtained the desired response.

If you aim to create a similar graphQL query, you can structure it like this:

{ "query": "{  cz_atlascon_etic_PTF(docmanId: 123, dz: CR) { docmanId, dz, data }}" }

To send the request using JavaScript, simply follow the same format. To offer additional assistance, here is how I executed the request in Java:

HttpRequest mainRequest =
HttpRequest.newBuilder()
.uri(URI.create("my graphQL endpoint"))
.POST(HttpRequest.BodyPublishers.ofString("{ \"query\": \"{  c_con_tic_PTF(docmanId: 123, dz: CR) { docmanId, dz, data }}\" }"))
.build();

Answer 3

Answer №2

To fetch data in JavaScript, utilizing the fetch API is a common method. Here is an example of how I typically approach it. Feel free to experiment by copying the code snippet below and executing it in Chrome Dev Tools.

async function fetchGraphQLData(url) {
    const queryObject = {
      query:
        '{ user(id: 123) { name } }',
    };
    const response = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(queryObject),
    });

    const json = response.json();

    return json;
}

async function fetchDataAsync() { 
  const data = await fetchGraphQLData('https://api.example.com/graphql');
  console.log(data); 
}
fetchDataAsync().catch(error => console.log('Error fetching data', error));

Answer 4

To fetch data in JavaScript, utilizing the fetch API is a common method. Here is an example of how I typically approach it. Feel free to experiment by copying the code snippet below and executing it in Chrome Dev Tools.

async function fetchGraphQLData(url) {
    const queryObject = {
      query:
        '{ user(id: 123) { name } }',
    };
    const response = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(queryObject),
    });

    const json = response.json();

    return json;
}

async function fetchDataAsync() { 
  const data = await fetchGraphQLData('https://api.example.com/graphql');
  console.log(data); 
}
fetchDataAsync().catch(error => console.log('Error fetching data', error));

Transformation from a graphql query to a json query

Answer №1

Answer №2

Similar questions

Converting Decimal to RGB Values using JavaScript and PHP

Is there a way to display the input value from an on-screen keyboard in an Angular application?

Does the success callback for AJAX operate synchronously?

Attempting to utilize express-load in conjunction with express 4

Deleting specialized object using useEffect hook

There was an issue encountered while attempting to execute the command: npx create-next-app -e with-tailwindcss my-project

The Angular bootstrap popover vanishes as soon as the mouse hovers over it

Is there a workaround using jQuery to enable CSS3 functionality across all browsers?

Troublesome GSP: JavaScript not functioning properly in Gr

Tips for converting intricate JSON nested data into CSV using Python?

How to check off a checkbox using a jQuery function

Understanding the process of unmarshalling an array within a POST request

Retrieving data from a JSON file and utilizing it as a reference in a fresh dictionary

How can we design the perfect JSON structure for this particular XML data?

Trouble arises when trying to load angular ui-bootstrap using require.js unless I change the name to ui.bootstrap

What could be the reason these two functions yield different outcomes?

What could be causing my browser to display twice the height value?

The Ionic framework is showing an error that says "'LoginCtrl' is not defined as a function."

Is it possible to direct the user to a particular link upon swiping to unlock?

Differences in window height between Firefox and Chrome