• Status: Solved
  • Priority: High
  • Security: Public
  • Views: 53
  • Last Modified:

Seeking Vanilla JS example on how to display GraphQL data using the GraphCMS API

I've been considering experimenting with using a headless CMS, .. more specifically -- with GraphCMS, which uses GraphQL:

https://graphcms.com/

Could someone here please show me an example of how I'd write an HTML file that contains plain old vanilla JavaScript that pulls in and displays query data from the API?  I ask because a "Quick Start" section appears to be completely lacking from the documentation.

There was supposed to be a vanilla JS example on this github page, .. but the files that are contained within the "vanillajs-apollo-fetch-rss-feed" subfolder are completely incomprehensible to me:

https://github.com/GraphCMS/graphcms-examples/tree/master/vanillajs-apollo-fetch-rss-feed

I currently don't know how to develop using React, or Apollo, or any other type of JavaScript based API/Library, and am not interested in any code examples that utilize them at this time.  What I'd like to see is an example of a plain old HTML file that uses vanilla JavaScript (or even JQuery) to pull in and display GraphQL data from the GraphCMS API.

Is this even possible?  Please advise.

Thanks,
- Yvan
1
egoselfaxis
Asked:
egoselfaxis
  • 7
  • 4
1 Solution
 
Brandon LyonSenior Frontend DeveloperCommented:
There was supposed to be a vanilla JS example on this github page, .. but the files that are contained within the "vanillajs-apollo-fetch-rss-feed" subfolder are completely incomprehensible to me

Can you elaborate about which parts you are having trouble understanding?
0
 
Brandon LyonSenior Frontend DeveloperCommented:
Lines 1-3 are loading required import files
Line 5 shows where the data is coming from
Lines 9-21 defines the webpage (RSS file) that you're making
Lines 22-31 defines the query you are requesting from your graphQL instance
Line 33+ initiates the query and renders it into the file that you're making

Phrased another way...

Step 1: Install nodejs & git
Step 2: Checkout the source files from the example git repository
Step 3: Using nodejs, run the example file main.js
Step 4: Main.js loads the data from the GraphCMS location and creates an XML file which is hosted at the url defined in line 12 which was created by lines 33+
0
 
egoselfaxisAuthor Commented:
Yeah .. I'm obviously not getting it. It appears as though that main.js file wasn't meant to be included in an HTML file, and that I'd instead need to run the JS file direclty using some kind of local node.js based server.  Am I mistaken about this?  

What if I just want to fetch some data from my endpoint, and then loop through and display it in an HTML page .. meaning a physical HTML file that I could upload and host on a remote server (ie: Netlify)?  

- Yvan
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Brandon LyonSenior Frontend DeveloperCommented:
Do you mean that you want to...

* Create an HTML file with a script tag in it
* Upload that file somewhere
* Someone visits that HTML file
* The person waits while the script tag queries an endpoint
* The body is then populated with the results from the query while the person waits

Or do you you want to...

* Create an HTML file with a script tag in it
* Run that HTML file through a static page generator
* Upload the resulting static HTML file somewhere
* Someone visits the resulting static HTML file

Or something else I'm not getting?
0
 
Brandon LyonSenior Frontend DeveloperCommented:
The most simple HTML example would be:

<html>
<head>
<script src="isomorphic-fetch.js" type="text/javascript"></script>
</head>
<body>
<script>
fetch('https://1jzxrj179.lp.gql.zone/graphql', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ query: '{ posts { title } }' }),
})
  .then(res => res.json())
  .then(res => console.log(res.data));
</script>
</body>
</html>

Open in new window


(adapted from here)

This will fetch titles from posts at an endpoint.
After that, it's up to you to determine what to do with the data.
You'll probably want an HTML template and an iterative javascript loop that applies the results from the json to the template tag.
0
 
egoselfaxisAuthor Commented:
<script src="isomorphic-fetch.js" type="text/javascript"></script>

Open in new window


Is this a polyfill?  And is it necessary?  If so, where do I obtain it from?

- Yvan
0
 
Brandon LyonSenior Frontend DeveloperCommented:
isomorphic-fetch is javascript which assists you in fetching data. You could program your own fetch function but using an existing one will save you time.
0
 
egoselfaxisAuthor Commented:
I agree, .. but there is no "isomorphic-fetch.js" file contained within the github package that you linked to.  Is there not supposed to be?  I ask because you referenced the "isomorphic-fetch.js" file implicitly in your example.

Since I don't use NPM or Bower, .. how exactly would i go about integrating this into the HTML example you've provided?  

- Yvan
0
 
Leonidas DosasCommented:
Check this article How to use GraphQL with jQuery
1
 
Brandon LyonSenior Frontend DeveloperCommented:
Apologies, I assumed isomorphic-fetch was a standalone library. Let me see if I can find another one instead. The desire to do this without node or libraries is making things more difficult.
1
 
Brandon LyonSenior Frontend DeveloperCommented:
GraphQL-Vanilla-JS appears to be another option but I would recommend taking a look at Leonidas' jQuery based example.

<html>
<head>
<script src="graphql_vanilla_js.js" type="text/javascript"></script>
</head>
<body>
<script>
// Create the client, specify the endpoint URL
client = GraphQL.makeClient("https://api.github.com/graphql"); 

// Set headers to be passed with each request
// The GitHub API specifies authentication via the Authorization header
client.setHeader("Authorization", "bearer " + auth_token);  

var query = `
query {
  user {
    login
  }
}`;

// Pass the query and a callback to handle the response
client.query(query, function(response){ 
  console.log(response); // {"data":{"user":{"login":"nwoodthorpe"}}}
});
</script>
</body>
</html>

Open in new window

0
 
egoselfaxisAuthor Commented:
I was trying to award points to both of you, but they've apparently changed the site works and I couldn't figure out how to do it.

The new design is a UI nightmare you guys .. seriously.  How the hell do I split points between users?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 7
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now