Content Delivery API

Your first request

In REST, HTTP verbs determine the operation performed. In GraphQL, you'll provide a JSON-encoded body even if you're performing a query operation, so the HTTP verb is always POST.

Curl example

$ curl 'https://graphql.datocms.com/' \
    -H 'Authorization: YOUR-API-TOKEN' \
    -H 'Content-Type: application/json' \
    -H 'Accept: application/json' \
    --data-binary '{ "query": "query { allPosts { title } }" }'

Vanilla JS

1
fetch(
2
  'https://graphql.datocms.com/',
3
  {
4
    method: 'POST',
5
    headers: {
6
      'Content-Type': 'application/json',
7
      'Accept': 'application/json',
8
      'Authorization': `Bearer ${process.env.DATOCMS_READONLY_TOKEN}`,
9
    },
10
    body: JSON.stringify({
11
      query:
12
    }),
13
  }
14
)
15
.then(res => res.json())
16
.then((res) => {
17
  console.log(res.data)
18
})
19
.catch((error) => {
20
  console.log(error);
21
});

@datocms/cda-client

We also offer a lightweight, TypeScript-ready package that offers various helpers around the native Fetch API to perform GraphQL requests towards DatoCMS Content Delivery API:

import { executeQuery } from '@datocms/cda-client';

const result = await executeQuery('{ allPosts { title } }', {
  token: process.env.DATOCMS_READONLY_TOKEN,
});

console.log(result);

You can learn more about this package on it's README file.

Pro tip: Top 5 JavaScript GraphQL Client Libraries

This blog post ranks the best JavaScript GraphQL client libraries, helping you choose the right tool based on your project’s specific needs and ensuring efficient and optimized GraphQL data fetching.