Skip to content

A demo for caching GraphQL POST requests with service worker

Notifications You must be signed in to change notification settings

bayareaunicorn/sw-graphql

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Cache GraphQL POST requests with Service Worker

Please check out the Cache GraphQL POST requests with Service Worker on Medium for a walkthrough of the solution in details.

TL;DR

This is a demo that demonstrates caching GraphQL POST requests with service worker. As Cache Storage API doesn't support caching POST requests, the solution is to cache POST responses in IndexedDB instead of the Cache Storage.

Sine Workbox uses CacheStorage API by default, we will hand-craft the service worker caching functionality in this demo instead of using Workbox.

You can check out the live demo at https://sw-graphql.firebaseapp.com/

Getting started

Start node.js server

Install Node modules and run node server locally. This will open up http://localhost:4000 for the website, and http://localhost:4000/graphql for GraphiQL test web.

npm install
npm start

Inspect and live-reload server

You can also run inspector if you'd like to debug the node server:

node --inspect server.js

Or, use nodemon to run the server with live-reload:

nodemon --inspect server.js

Test GraphQL API endpoint (Optional)

You can open up http://localhost:4000/graphql to test GraphQL API endpoint with the following query string:

{
  restaurants(type:"Japanese", stars: 3) {
    name
    stars
  }
}

This shall return the query result in JSON format like the following:

{
  "data": {
    "restaurants": [
      {
        "name": "Masa",
        "stars": 3
      }
    ]
  }
}

Test service worker's caching for GraphQL requests.

Open up http://localhost:4000 in Chrome's Incognito mode. You will see the index page for 2018 Michelin-Star Restaurants in New York City with two dropdown filters (stars and types). Follow the steps below to verify if a service worker is installed correctly:

  • Open up Chrome's DevTools
  • Go to Application tab and select Service Workers You shall see a service worker (sw.js) is installed and running.
  • Select IndexedDB, and this shall be empty if it's the first time opening up the web app.

In the index page, try changing one filter (e.g. changing Michelin Stars to 3). This will make an GraphQL POST request to the backend. The service worker will cache it in the IndexedDB based on the query.

Now, follow the steps below to verify the cached POST responses in IndexedDB.

  • Refresh the index page.
  • In the Chrome's DevTools, select IndexedDB > GraphQL-Cache > post_cache.
  • In the IndexedDB table, you will see a row with key and value.
  • Expand the value data, and you shall see a key composed of query string, a response JSON based on the POST request, and a timestamp.

Try a different combination of filters and see if it updates the IndexedDB cache.

Questions and Issues?

Please file issues at https://github.com/jonchenn/sw-graphql/issues

Reference

About

A demo for caching GraphQL POST requests with service worker

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 57.2%
  • HTML 42.8%