diff --git a/packages/react-urql/src/hooks/useQuery.ts b/packages/react-urql/src/hooks/useQuery.ts index 4070199798..a7caf9a662 100644 --- a/packages/react-urql/src/hooks/useQuery.ts +++ b/packages/react-urql/src/hooks/useQuery.ts @@ -1,5 +1,5 @@ import { DocumentNode } from 'graphql'; -import { useEffect, useCallback, useMemo } from 'react'; +import { useState, useEffect, useCallback, useMemo } from 'react'; import { Source, @@ -181,13 +181,23 @@ export function useQuery( [update, makeQuery$] ); + const [suspend, setSuspend] = useState<[Promise | null]>([null]); + useEffect(() => { - sources.delete(request.key); // Delete any cached suspense source - if (!isSuspense(client, args.context)) update(query$); + try { + sources.delete(request.key); // Delete any cached suspense source + update(query$); + } catch (promise) { + if (promise != null && promise.then) { + setSuspend([promise]); + } + } }, [update, client, query$, request, args.context]); - if (isSuspense(client, args.context)) { - update(query$); + if (suspend[0]) { + const promise = suspend[0]; + suspend[0] = null; + throw promise; } return [state, executeQuery];