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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const fetchedPosts = [...Array(10).keys()];
  
  const hydrateCache = () => assign({
    queryCache: (context) => context.asyncStorage
  })
  
  const storeToRecoil = () => assign({
    recoil: (context) => {
      let { recoil, queryCache } = context;
      return {
        posts: [
          ...queryCache.posts, 
          ...recoil.posts,
        ]
      }
    }
  });
  
  const storeFetchedPosts = () => assign({
    queryCache: {
      posts: fetchedPosts,
    }
  });
  
  const persistCache = () => assign({
    asyncStorage: (context) => ({
      posts: context.queryCache.posts
    })
  });
  
  const retryFetch = () => assign({
    retries: (context) => context.retries + 1
  })
  
  const postMachine = Machine({
    id: 'posts',
    initial: 'hydratingCache',
    context: {
      recoil: {
        posts: []
      },
      asyncStorage: {
        'posts': [100, 101, 102, 103]
      },
      queryCache: {},
      retries: 0,
    },
    states: {
      hydratingCache: {
        on: {
          HYDRATE_DONE: {
            target: 'idle',
            actions: hydrateCache()
          }
        }
      },
      idle: {
        on: {
          FETCH: {
            target: 'fetching',
            actions: storeToRecoil(),
          }
        }
      },
      fetching: {
        on: {
          RESOLVE: {
            target: 'success',
            actions: [
              storeFetchedPosts(),
              storeToRecoil(),
            ],
          },
          REJECT: 'failure',
        }
      },
      success: {
        on: {
          PERSIST: {
            target: 'persisting',
            actions: persistCache()
          }
        }
      },
      persisting: {
        type: 'final'
      },
      failure: {
        on: {
          RETRY: {
            target: 'fetching',
            actions: retryFetch(),
            cond: (context) => {
              return context.retries < 3
            }
          }
        }
      }
    }
  })