Executing queries against the GraphQL server

We can connect to the GraphQL server from any client running JavaScript. This includes:

  • Vanilla JS in the client-side application
  • Using a framework (such as Vue or React)
  • From within a WordPress editor block

There is no need for an external JavaScript library to connect to the GraphQL endpoint: Simple JavaScript code will already do.

Executing queries against a GraphQL endpoint permalink

This JavaScript code submits a query with variables to the GraphQL server, and prints the response to console.

/**
* Replace here using either:
* - The single endpoint's URL
* - A custom endpoint's permalink
*/

const GRAPHQL_ENDPOINT = '{ YOUR_ENDPOINT_URL }';

(async function () {
const limit = 3;
const data = {
query: `
query GetPostsWithAuthor($limit: Int) {
posts(limit: $limit) {
id
title
author {
id
name
}
}
}
`
,
variables: {
limit: `${ limit }`
},
};

const response = await fetch(
GRAPHQL_ENDPOINT,
{
method: 'post',
body: JSON.stringify(data),
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
'Content-Length': data.length,
},
credentials: 'include',
}
);

/**
* Execute the query, and await the response
*/

const json = await response.json();

/**
* Check if the query produced errors, otherwise use the results
*/

if (json.errors) {
console.log(JSON.stringify(json.errors));
} else {
console.log(JSON.stringify(json.data));
}
})();

Executing persisted queries permalink

Executing a persisted query has a few differences:

  • There is no need to submit a GraphQL query
  • The operation is GET, not POST
  • Variables must be added to the URL
/**
* Replace here using:
* - A persisted query's permalink
*/

const GRAPHQL_PERSISTED_QUERY_PERMALINK = '{ YOUR_PERSISTED_QUERY_PERMALINK }';

(async function () {
const limit = 3;

/**
* If needed, add variables in the URL
*/

const GRAPHQL_PERSISTED_QUERY = `${ GRAPHQL_PERSISTED_QUERY_PERMALINK }?limit=${ limit }`;

const response = await fetch(
GRAPHQL_PERSISTED_QUERY,
{
method: 'get',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
'Content-Length': data.length,
},
credentials: 'include',
}
);

const json = await response.json();
if (json.errors) {
console.log(JSON.stringify(json.errors));
} else {
console.log(JSON.stringify(json.data));
}
})();

Sending nonce header permalink

If you need to execute an operation including a nonce, add the X-WP-Nonce header.

Print your nonce:

<script>
const NONCE = '{ Print nonce value }' ;
</script>

Include it in the headers to fetch:

{
headers: {
'X-WP-Nonce': `${ NONCE }`
}
}

Demonstration permalink

This same page is connecting to the GraphQL server, to fetch a list of posts, using the JavaScript code shown at the top.

You can inspect this page's source code, and use the DevTools Network tab to see how it is executing the query against the GraphQL server.

Results from executing the query:

Using GraphQL clients permalink

You can also use a GraphQL client to connect to the server, such as: