Generated by XState Viz: https://xstate.js.org/viz

machine.js

/*
 * FETCH MACHINE bis (work in progress)
 * preview: https://xstate.js.org/viz/?gist=a3768c794e1d159d1740225d0899c43c
 * previous: https://xstate.js.org/viz/?gist=0291cafd5f583c165a3ef1dd35bf02af
 */

  // Available variables:
  // Machine (machine factory function)
  // assign (action)
  // XState (all XState exports)
  
  const fetchMachine = Machine({
    id: 'fetch',
    context: { attempts: 0 },
    initial: 'idle',
    states: {
      idle: {
        on: {
          FETCH: {
            target: 'pending',
            cond: function canFetch() {
              return true
            },
          }
        },
      },
      pending: {
        entry: assign({
          attempts: ctx => ctx.attempts + 1
        }),
        after: {
          TIMEOUT: 'rejected'
        },
        on: {
          RESOLVE: 'fulfilled',
          REJECT: 'rejected'
        }
      },
      fulfilled: {
        initial: 'first',
        states: {
          first: {
            on: {
              NEXT: 'second'
            }
          },
          second: {
            on: {
              NEXT: 'third'
            }
          },
          third: {
            type: 'final'
          }
        }
      },
      rejected: {
        entry: assign({
          ref: () => spawn(Machine({ initial: 'foo', states: {foo: {}}}))
        }),
        initial: 'can retry',
        states: {
          'can retry': {
            on: {
              '': {
                target: 'failure',
                cond: 'maxAttempts'
              }
            }
          },
          failure: {
            on: {
              RETRY: undefined,
            },
            type: 'final'
          }
        },
        on: {
          RETRY: 'pending'
        }
      }
    }
  }, {
    guards: {
      maxAttempts: ctx =>  ctx.attempts >= 5
    },
    delays: {
      TIMEOUT: 2000
    }
  });