Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2022-05-31T17:15:48.507Z
Answers.Text: Hey @jannisborgers , thx for the answer. The "json" option is new to me. It works now! Thank you for the help
Answers.UserDisplayName: Simon Franzen
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2022-05-30T20:14:42.363Z
Answers.LastActivityDate: 2022-05-30T20:14:42.363Z
Answers.UserDisplayName: jannisborgers
Body: <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>
  
Tags: <graphql><api>
Title: How to make a external GraphQL API request?
ThreadText: # 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](https://plugins.craftcms.com/fetch) 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:
  
  ```twig
  {# 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:
  
  1. When defining the query, get rid of the surrounding quotes.
  2. Group your `query` and `variables` under a `json` key which will hold your request body.
  3. 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  
  
  ---
  
  