Quick and dirty Urql Suspense example

Suspense Urql.js

const useQuery = (query, opts) => {
  const source = useRef();
  const [state, setState] = useState();
  
  const makeRead = useCallback(() => {
    let status = "pending";
    let response;
    let promise = new Promise((resolve) => {
      source.current = pipe(
        client.createOperation(query, opts),
        subscribe(
        (data) => {
          setState({ fetching: false, data })
          response = { fetching: false, data };
          status = "success";
          resolve(response);
        }, (error) => {
          setState({ fetching: false, error }),
          response = { fetching: false, error };
          status = "success";
          resolve(response)
        })
      )
    }, [query, variables]);


    return {
      read: () => {
        if (status === "pending") {
          throw promise;
        }

        return response;
      }
    };
  }, []);

  return useMemo(() => {
    if (state === undefined) {
      return makeRead():
    }

    return { read: () => state };
  }, [state]);
}

const MyApp = () => (
  <Suspense fallback={<p>Fallback</p>}>
    <MyPage />
  </Suspense>
);

const MyPage = () => {
  const users = useQuery();
  const { data, error, fetching } = users.read();
  
  if (fetching && !data) {
    return <p>fetching</p>;
  }
  
  if (error) {
    return <p>error</p>;
  }
  
  return <p>data</p>
}