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
egoselfaxisAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
GraphAPI

From novice to tech pro — start learning today.