<p>We solved this ourselves last week when we wanted to query an existing, external GraphQL API from inside a CraftCMS website in Twig without using a GraphQL client. I assume that <code>fetch()</code> in your code is the <a href="https://plugins.craftcms.com/fetch" rel="nofollow noreferrer">Fetch plugin</a> for CraftCMS.</p>
<p><strong>tldr; Try requesting with the raw query, without any filters or quotes, but group <code>query</code> and <code>variables</code> under <code>json</code> key inside <code>options</code>.</strong></p>
<p>This should work:</p>
<pre class="lang-twig prettyprint-override"><code>{# 1: block-set query without special treatment #}
{% set graphQLQuery %}
query GetPoi($id: ID!) {
account(name: &quot;Account 1&quot;) {
    id
    poi(id: $id) {
      id
      title
    }
  }
}
{% endset %}

{% set client = {
  base_uri : 'https://www.mydomain.com'
} %}

{# 2: query and variables under json key #}
{# 3: no filters for query #}
{% set options = {
  json: {
    query: graphQLQuery,
    variables: {
      id: craft.app.request.getSegment(3)
    }
  }
} %}

{% set results = fetch(client, 'POST', '/graphql?locale=de', options) %}

{{ d(results.body ?? results) }}
</code></pre>
<p>Three important points:</p>
<ol>
<li>When defining the query, get rid of the surrounding quotes.</li>
<li>Group your <code>query</code> and <code>variables</code> under a <code>json</code> key which will hold your request body.</li>
<li>Using <code>|json_encode</code> or other filters on the query looks like the right way because it’s working like that in JS, where you wrap the whole body in <code>JSON.stringify()</code>. But for some reason, this doesn’t return data in Craft/Twig. We got several types of errors instead: <code>Unexpected end of document</code>, <code>No query string was present</code>, and <code>400 Bad request</code>, depending on what we used….</li>
</ol>
<p>The code above worked for our API after a lot of trial and error, and is rather easy to maintain because changing the query can be copy and pasted from GraphiQL or other sources.</p>

CC BY-SA 4.0
2022-05-31T17:15:48.507Z
Hey @jannisborgers , thx for the answer. The "json" option is new to me. It works now! Thank you for the help
Simon Franzen
CC BY-SA 4.0
2022-05-30T20:14:42.363Z
2022-05-30T20:14:42.363Z
jannisborgers
<p>I want to query some data from another domain. I dont want to to do it in JS (client side) because I want the content right in place on the page.</p>
<p>I tried with several options and variations with the fetch plugin:</p>
<pre><code>{% set poi_query %}&quot;query GetPoi($id: ID!) {

account(name: &quot;Account 1&quot;) {
    id
    poi(id: $id) {
      id
      title
    }
  }
}&quot;
{% endset %}

{% set client = {
  base_uri : 'https://www.mydomain.com'
} %}

{% set options = {
  headers: {
    &quot;Content-Type&quot;: &quot;application/json&quot;
  },
  query: poi_query|json_encode,
  variables: {
    id: craft.app.request.getSegment(3)
  }|json_encode
} %}

{% set results = fetch(client, 'POST', '/graphql?locale=de', options) %}

{{ d(client, 'POST', '', options) }}
{{ d(results.body ?? results) }}
</code></pre>
<p>It always returns 400 errors, or Missing Query</p>

<graphql><api>
How to make a external GraphQL API request?
# How to make a external GraphQL API request?

(Asked by: username_0 on 2022-05-30)

I want to query some data from another domain. I dont want to to do it in JS (client side) because I want the content right in place on the page.
I tried with several options and variations with the fetch plugin:
{% set poi_query %}"query GetPoi($id: ID!) {

account(name: "Account 1") {
    id
    poi(id: $id) {
      id
      title
    }
  }
}"
{% endset %}

{% set client = {
  base_uri : 'https://www.mydomain.com'
} %}

{% set options = {
  headers: {
    "Content-Type": "application/json"
  },
  query: poi_query|json_encode,
  variables: {
    id: craft.app.request.getSegment(3)
  }|json_encode
} %}

{% set results = fetch(client, 'POST', '/graphql?locale=de', options) %}

{{ d(client, 'POST', '', options) }}
{{ d(results.body ?? results) }}

It always returns 400 errors, or Missing Query

**Tags:** graphql, api


---

## 1 answers

### Answer by username_1 on 2022-05-30. Score: 2 | Accepted answer

We solved this ourselves last week when we wanted to query an existing, external GraphQL API from inside a CraftCMS website in Twig without using a GraphQL client. I assume that fetch() in your code is the Fetch plugin for CraftCMS.
tldr; Try requesting with the raw query, without any filters or quotes, but group query and variables under json key inside options.
This should work:
{# 1: block-set query without special treatment #}
{% set graphQLQuery %}
query GetPoi($id: ID!) {
account(name: "Account 1") {
    id
    poi(id: $id) {
      id
      title
    }
  }
}
{% endset %}

{% set client = {
  base_uri : 'https://www.mydomain.com'
} %}

{# 2: query and variables under json key #}
{# 3: no filters for query #}
{% set options = {
  json: {
    query: graphQLQuery,
    variables: {
      id: craft.app.request.getSegment(3)
    }
  }
} %}

{% set results = fetch(client, 'POST', '/graphql?locale=de', options) %}

{{ d(results.body ?? results) }}

Three important points:

When defining the query, get rid of the surrounding quotes.
Group your query and variables under a json key which will hold your request body.
Using |json_encode or other filters on the query looks like the right way because it’s working like that in JS, where you wrap the whole body in JSON.stringify(). But for some reason, this doesn’t return data in Craft/Twig. We got several types of errors instead: Unexpected end of document, No query string was present, and 400 Bad request, depending on what we used….

The code above worked for our API after a lot of trial and error, and is rather easy to maintain because changing the query can be copy and pasted from GraphiQL or other sources.

> **Comments:**
> **username_0**: Hey @username_1 , thx for the answer. The "json" option is new to me. It works now! Thank you for the help  

---

