Get collections data via JS – GraphQL

[eliasu]

Hi there,

short and simple beginner question:
Whats the best way to retrieve data from my collections inside of a JS file?
Do I use GraphQL or REST? And if, how to implement it in JS?

Thanks in advance.

[edalzell]

There are two generic ways, the GraphQL api or the Content API. Pick whichever one works best for your use case.

[jasonvarga]

Use whatever Javascript solution you're comfortable with for performing AJAX requests, and point it at either the GraphQL endpoint or a REST API endpoint.

https://sabe.io/classes/javascript/ajax-fetch
https://api.jquery.com/Jquery.ajax/
https://axios-http.com
https://stepzen.com/blog/consume-graphql-in-javascript
https://blog.logrocket.com/5-graphql-clients-for-javascript-and-node-js/

[eliasu]

Thanks for the direction. I could figure it out … it was quote a challenge to get everything up and running, but now it works. If anybody is looking for the same … heres how i've done it ;)

1. Activate GraphQL

• Either go to your .env file and set a variable of STATAMIC_GRAPHQL_ENABLED=true
• Or go to config/statamic/graphql.php and under GraphQL set 'enabled' => true,

2. Install Helpers

There are many ways to retrieve GraphQL messages. Have a look at @jasonvarga post. There are some good links to start.
I used this npm add graphql-request graphql See documentation.

3. What to do within JS?

• Import the library at the top of your file

import { GraphQLClient, gql } from 'graphql-request'

• Create a query. To understand how that works, see the docs and use the "GraphQL query creator" (Left Sidebar within your control panel where it says GraphQL)

const query = gql`{
  entries(collection: "handler") {
    data {
      ... on Entry_Post_Post {
        title
      }
   }
  }
}`

• Add a new GraphQL Client via

const client = new GraphQLClient('http://your-domain.test/graphql');

• Create a request inside of an async function.

(async () => {
  try {
    // send the query from above and wait for answer
    const data = await client.request(query);
    
    // maka a string out of data
    var receivedData = JSON.stringify(data, undefined, 2);
    
    // create an JS object from string.
    var obj = JSON.parse(receivedData);

    // access data like this
    console.log( obj.entries.data[0].title );
  } 
  catch (e) {
    console.log("No GraphQL received");
  }
})();

I don't know if this is the best way to do this, but it worked for me. But please feel free to comment improvements.
I hope that helps …