Search⌘ K
AI Features
Home
Courses
Craft GraphQL APIs in Elixir with Absinthe

GraphQL Query Fetching

Explore how to fetch data from a GraphQL API in a frontend environment using JavaScript fetch with POST requests. Learn to handle promises, manage errors, and dynamically update the DOM after retrieving query results. Understand how to prepare your web app for cross-origin requests to integrate seamlessly with your GraphQL backend.

We'll cover the following...

Fetching data from GraphQL using query

Let’s shut down our fancy “Hi!” web server and work on our web application a little more. We start by modifying our index.html document to do the following two things:

  • Load a polyfill for the browser fetch API.
  • Load our application code.

This will involve two script tags. We can also remove our greeting:

HTML
<!doctype html>
<html lang="en"> <head>
<title>PlateSlate (Basic UI)</title>
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch"></script> <script src="/js/app.js"></script>
  </head>
  <body>
  </body>
</html>

We’ll define three named ...