How do I query the GraphQL endpoint with Axios/Got?

Developing with Prismic
1

I’m a trying to use the GraphQL api. My queries work in graphiql, but no where else.

I’m using: https://my-repo-name.prismic.io/graphql

Whether I use Got or Axios, neither works. Also, neither allows sending a body/query in a GET request, but I still get errors when I use POST. I’ve gotten one 400 error if that helps at all.

This is my Got code:

(async () => {
  try {
    const body = await got.post("https://my-repo-name.prismic.io/graphql", {
      headers: {
        Authorization: process.env.ACCESS_TOKEN,
        "Prismic-Ref": "master",
        ref: "master",
      },
      body: `query{
      // ...a query that works in the graphql explorer for my repo...
      }
      `,
      responseType: "json",
    });

    console.log(body.data);
  } catch (e) {
    console.log(e);
  }
})()
2

Could you use an actual GraphQL client, like Apollo? GraphQL queries aren’t just the raw query string, it’s a JSON object with other things added.

5

Hi @daniel.mon.johns, I’m not sure about this, so I’ll have to pass it over to our @team-tech-support. Someone there will look into this as soon as they are able and get back to you with what they find.

6

At the end of the day, they are POST’ing the JSON to the server and receiving a response. I wanted to use a lighter solution because I’m using 11ty and not a full SPA.
Are my URL and headers correct at least?

7

Right, but you’ll need to send it to Prismic like this:

const query = `query {
  allPages {
    totalCount
  }
}`

fetch('https://<repository>.prismic.io/graphql?query=' + encodeURIComponent(query), {
  headers: {
    'Prismic-ref': '<prismic ref>'
  }
}).then(r => r.json()).then(console.log)

When you get to using variables, it might be more hassle than it is worth.

8

Doesn’t work. I even made my repo public

const query = `query that works in graphqil`
axios({
  url: `https://<my-repo>.prismic.io/graphql?query=${query}`,
// I also tried encodeURIComponent(query)
  method: "get",
  headers: {
    "Content-Type": "application/json",
    // Authorization: auth,
    "Prismic-Ref": "master",
    // ref: "master",
  },
})
  .then((result) => {
    console.log(result);
  })
  .catch(console.log);
9

Any news? They haven’t gotten back to me.

10

Hey @daniel.mon.johns, have you tried running the query from the explorer?

If you go to https://<your-repo>.prismic.io/graphql, you should see a GraphiQL browser.

11

@daniel.mon.johns
I know that the dev team is tracking this. I don’t have an ETA on when they will be able to look into it, but be assured that it is in their queue.

Someone will reach out to you when they pick this up.

12

Yea, my query works in GraphiQL, but everywhere else I get this now:
Query does not pass validation. Violations:↵↵Cannot query field 'hero'

13

Hey Daniel,

We are going to test this with Axios to see if it works. In the meantime, is there any reason you aren’t using the recommended Client for GraphQL queries?

This users website is a good example of how it works:

14

I didn’t want to mess with all of Apollo, I will try it out tho. Any news on using Axios or Got?

15

This will work. You can use axios instead of fetch if you like, but if you're worried about weight, fetch is a native browser API.

2 Likes
16

Hi,
If you didn’t succeed to do it with axios or got, it’s exactly the same as it’s done by fetch like the way @marcellothearcane did it.

Here’s a recap (in node):

const fetch = require('node-fetch');
const axios = require('axios').default;
const got = require('got').default;

const query = `query {
    allCss {
        totalCount
    }
}`

fetch('http://<YOUR_REPO>.prismic.io/graphql?query=' + encodeURIComponent(query), {
    headers: {
        'Prismic-ref': '<YOUR_MASTER_REF>',
        'Authorization': 'Token <YOUR_TOKEN>'
    }
}).then(r => r.json()).then(console.log)

axios.get('http://<YOUR_REPO>.prismic.io/graphql?query=' + encodeURIComponent(query), {
    headers: {
        'Prismic-ref': '<YOUR_MASTER_REF>',
        'Authorization': 'Token <YOUR_TOKEN>'
    }
}).then((response) => console.log(response.data))

got.get('http://<YOUR_REPO>.prismic.io/graphql?query=' + encodeURIComponent(query), {
    headers: {
        'Prismic-ref': '<YOUR_MASTER_REF>',
        'Authorization': 'Token <YOUR_TOKEN>'
    }
}).json().then(console.log)
2 Likes
17

This issue has been closed due to inactivity.