Retry on 429 error

[egrossnickle]

I'm using Graffle (currently 8.0.0-next.157) in a Nuxt app to fetch data from Storyblok. I've experienced some 429 rate limit responses and and I'm wondering how to handle those (and other errors) — ideally by automatically retrying a certain number of times with delays in-between.

Here's roughly what I'm doing:

import { Graffle } from 'graffle'

const graffle = Graffle
  .create()
  .transport({
    url: 'https://gapi-us.storyblok.com/v1/api',
    headers: {
      Token: '<TOKEN>',
      Version: 'published'
    }
  })

const document = graffle.gql`
    query getPage($id: ID!) {
      PageItem(id: $id) {
        name
        full_slug
        content
      }
    }
  `

const data = await document.send({ id: 'home' })

[jasonkuhrt]

Hey @egrossnickle there used to be a retry but I temporarily removed this while trying to re-work various aspects of core.

Until now I didn't know anyone was/would using that feature so its great to hear your feedback.

As it stands, without that transparent retry support built into the anyware system, you're going to have to build the retry on the outside/around your graffle client. I realize that is not ideal!

I will make an issue to track brining retry back!

[egrossnickle]

Thanks for the explanation! Although I'm not sure how I would go about building it around the client. Is it possible to see the HTTP status response from document.send({ id: 'home' })?

[jasonkuhrt]

Yes, the result should have the response when you are using the envelope. Example: https://graffle.js.org/examples/output/envelope

[egrossnickle]

Thank you. Here's what I came up to implement retry — I created a wrapper function around graffle.gql. I'm using this in a Vue composable, but this is the gist of it. I've only tested against a mock API so far.

import { Graffle } from 'graffle'

const config = {
  maxRetries: 5,
  retriesDelay: 1000
}

const graffle = Graffle
  .create({
    output: {
      envelope: true
    }
  })
  .transport({
    url: 'https://gapi-us.storyblok.com/v1/api',
    headers: {
      Token: '<TOKEN>',
      Version: 'published'
    }
  })

const gql: typeof graffle.gql = (...args: Parameters<typeof graffle.gql>) => {
  const document = graffle.gql(...args)

  const send: typeof document.send = async (...sendArgs: Parameters<typeof document.send>) => {
    let data
    let retries = 0

    do {
      data = await document.send(...sendArgs)

      if (data.response?.status === 429) {
        if (retries < config.maxRetries) {
          const retriesDelay = data.response?.headers.get('Retry-After')
            ? parseInt(data.response?.headers.get('Retry-After')) * 1000
            : config.retriesDelay
          retries++
          console.log(`Hit rate limit. Retry #${retries} in ${retriesDelay / 1000} seconds…`)
          await new Promise(resolve => setTimeout(resolve, retriesDelay))
          continue
        } else {
          console.error(`Max retries (${config.maxRetries}) reached, aborting.`)
        }
      } else if (data.response?.status === 200) {
        if (retries > 0) {
          console.log(`Success after ${retries} retries.`)
        }
      }

      return data
    } while (retries <= config.maxRetries)
    
    return data
  }
  
  return {
    send
  }
}

const document = gql`
  query getPage($id: ID!) {
    PageItem(id: $id) {
      name
      full_slug
      content
    }
  }
`

const { data } = await document.send({ id: 'home' })

[jasonkuhrt]

You could turn this into an extension. Once I'm done my current PR I'll show you how that would look. Feel free to try now, it's just that my current PR is going to change extension system interface.

[egrossnickle]

Ok. I'll just wait for the PR before migrating this to an extension.