diff --git a/src/react/hooks/useSuspenseQuery.ts b/src/react/hooks/useSuspenseQuery.ts index 3eaf24f2431..06eabbf40de 100644 --- a/src/react/hooks/useSuspenseQuery.ts +++ b/src/react/hooks/useSuspenseQuery.ts @@ -220,13 +220,21 @@ function useWatchQueryOptions({ return { ...watchQueryOptions, - fetchOnFirstSubscribe: false, query, errorPolicy: errorPolicy || defaultOptions?.errorPolicy || DEFAULT_ERROR_POLICY, fetchPolicy: fetchPolicy || defaultOptions?.fetchPolicy || DEFAULT_FETCH_POLICY, notifyOnNetworkStatusChange: suspensePolicy === 'always', + // By default, `ObservableQuery` will run `reobserve` the first time + // something `subscribe`s to the observable, which kicks off a network + // request. This creates a problem for suspense because we need to begin + // fetching the data immediately so we can throw the promise on the first + // render. Since we don't subscribe until after we've unsuspended, we need + // to avoid kicking off another network request for the same data we just + // fetched. This option toggles that behavior off to avoid the `reobserve` + // when the observable is first subscribed to. + fetchOnFirstSubscribe: false, variables: compact({ ...defaultOptions?.variables, ...variables }), }; }, [options, query, defaultOptions]);