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

machine.js

Machine({
  id: 'SWAPI',
  initial: 'idle',
  context: {
    user: null
  },
  states: {
    idle: {
      on: {
        FETCH: 'loading'
      }
    },
    loading: {
      invoke: {
        id: 'fetchLuke',
        src: (context, event) => fetch('https://swapi.dev/api/people/1/')
          .then(data => data.json()),
        onDone: {
          target: 'resolved',
          actions: assign({
            user: (_, event) => event.data
          })
        },
        onError: 'rejected'
      },
      on: {
        CANCEL: 'idle'
      }
    },
    resolved: {
      type: 'final'
    },
    rejected: {
      on: {
        FETCH: 'loading'
      }
    }
  }
})