Workbox - NetworkOnly executes even if I return false

Question

Using Workbox, I am trying to deal with graphql.

Anyone know why I am getting this error message from NetworkOnly? I am returning false in the route matcher, so I don't know why new NetworkOnly() is even executing. This only happens in offline mode (no network available).

The strategy could not generate a response for ... The underlying error is TypeError: Failed to fetch.

at NetworkOnly._handle (webpack://service-workers/./node_modules/workbox-strategies/NetworkOnly.js?:101:19) at async NetworkOnly._getResponse (webpack://service-workers/./node_modules/workbox-strategies/Strategy.js?:155:24)

const bgSyncPlugin = new BackgroundSyncPlugin('myQueueName', {
  maxRetentionTime: 24 * 60 
});
 
const isGraphqlSubmitForm = async(event) => {
  const clonedRequest = event.request.clone();
  const body = await clonedRequest.json();

  if (body?.operationName === 'submitForm') {
    return true;
  }
  return false; // I MADE SURE THIS IS BEING RETURNED 
};
 
registerRoute(
  isGraphqlSubmitForm,
  new NetworkOnly({
    plugins: [bgSyncPlugin]
  }),
  'POST'
);

Answer 1

Sorry about that—you're seeing that behavior because the truthiness of the return value from this function is used to determine whether a route matches, and an async function always returns a Promise, which is a "truthy" value.

There's a log message that warns about this if you're in Workbox's development mode.

If it's possible for you to add in a header on the requests you want to match, that would probably be the easiest way to synchronously trigger your route, since any attempt to access a request body needs to be async. Failing that, the cleanest approach would be to just match all of your GraphQL requests with a given route, and then inside of that route's handler, use whatever async logic you need to trigger different strategies for different types of traffic.