alveronhook.js

const store = {
  model: {
    data: undefined,
    errors: [],
    loading: false,
  },
  actions: {
    setLoading: (state, loading) => ({
      ...state,
      loading,
    }),
    setErrors: (state, errors) => ({
      ...state,
      errors,
    }),
    setData: (state, data) => ({
      ...state,
      data,
    }),
  },
  effects: {
    fetchData: ({ actions, effects, clusterActions }) => {
      actions.setLoading(true)

      fetch(
        'https://serve.onegraph.com/dynamic?app_id=69fdceab-b2bf-474b-b3c0-15e15f2d5883',
        {
          method: 'POST',
          body: JSON.stringify({ query: QUERY }),
        }
      )
        .then(res => res.json())
        .then(({ data, errors = [] }) => {
          clusterActions(actions => {
            if (errors) {
              actions.setErrors(errors)
            }
            actions.setData(data)
            actions.setLoading(false)
          })

          effects.logDelayed(data)
        })
    },
    logDelayed: ({ actions, effects, clusterActions }, payload) =>
      setTimeout(console.log, 1000, payload),
  },
}
export default () => {
  const { state, actions, effects } = useAlveron(store)

  useEffect(effects.fetchData, [])

  if (state.loading) {
    return <div>LOADING</div>
  }

  if (state.errors.length > 0) {
    return <div>ERROR</div>
  }

  return <div>{JSON.stringify(state.data)}</div>
}