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

machine.js

const fetchMachine = Machine(
  {
    id: "fetch",
    initial: "idle",
    context: {
      url: {},
      data: null,
      error: null,
      retries: 0,
      maxRetries: 3
    },
    states: {
      idle: {
        on: {
          FETCH: "loading"
        }
      },
      loading: {
        invoke: {
          src: "fetch",
          onDone: {
            target: "success",
            actions: ["setData", "notifyData"]
          },
          onError: {
            target: "failure",
            actions: ["setError", "notifyError"]
          }
        }
      },
      success: {
        on: {
          REFETCH: {
            target: "loading",
            actions: "resetRetries"
          }
        }
      },
      failure: {
        on: {
          "": {
            target: "fatal",
            cond: "canNotRetry"
          },
          RETRY: {
            target: "loading",
            actions: "incrementRetries"
          }
        }
      },
      fatal: {
        type: "final"
      }
    }
  },
  {
    guards: {
      canNotRetry: ({ retries, maxRetries }) => retries === maxRetries
    },
    actions: {
      setData: assign({ data: (_, event) => event.data }),
      notifyData: () => {},

      setError: assign({ error: (_, event) => event.data }),
      notifyError: () => {},

      incrementRetries: assign({ retries: context => context.retries + 1 }),
      resetRetries: assign({ retries: 0 })
    },
    services: {
      fetch: context => axios(context.url).then(response => response.data)
    }
  }
);