diff --git a/src/react/hooks/useLoadableQuery.ts b/src/react/hooks/useLoadableQuery.ts index 832ba6bcade..7c0c0cca4e6 100644 --- a/src/react/hooks/useLoadableQuery.ts +++ b/src/react/hooks/useLoadableQuery.ts @@ -55,51 +55,6 @@ export type UseLoadableQueryResult< }, ]; -/** - * A hook for imperatively loading a query, such as responding to a user - * interaction. - * - * > Refer to the [Suspense - Fetching in response to user interaction](https://www.apollographql.com/docs/react/data/suspense#fetching-in-response-to-user-interaction) section for a more in-depth overview of `useLoadableQuery`. - * - * @example - * ```jsx - * import { gql, useLoadableQuery } from "@apollo/client"; - * - * const GET_GREETING = gql` - * query GetGreeting($language: String!) { - * greeting(language: $language) { - * message - * } - * } - * `; - * - * function App() { - * const [loadGreeting, queryRef] = useLoadableQuery(GET_GREETING); - * - * return ( - * <> - * - * Loading...}> - * {queryRef && } - * - * - * ); - * } - * - * function Hello({ queryRef }) { - * const { data } = useReadQuery(queryRef); - * - * return
{data.greeting.message}
; - * } - * ``` - * - * @since 3.9.0 - * @param query - A GraphQL query document parsed into an AST by `gql`. - * @param options - Options to control how the query is executed. - * @returns A tuple in the form of `[loadQuery, queryRef, handlers]` - */ export function useLoadableQuery< TData, TVariables extends OperationVariables, @@ -148,6 +103,51 @@ export function useLoadableQuery< } ): UseLoadableQueryResult, TVariables>; +/** + * A hook for imperatively loading a query, such as responding to a user + * interaction. + * + * > Refer to the [Suspense - Fetching in response to user interaction](https://www.apollographql.com/docs/react/data/suspense#fetching-in-response-to-user-interaction) section for a more in-depth overview of `useLoadableQuery`. + * + * @example + * ```jsx + * import { gql, useLoadableQuery } from "@apollo/client"; + * + * const GET_GREETING = gql` + * query GetGreeting($language: String!) { + * greeting(language: $language) { + * message + * } + * } + * `; + * + * function App() { + * const [loadGreeting, queryRef] = useLoadableQuery(GET_GREETING); + * + * return ( + * <> + * + * Loading...}> + * {queryRef && } + * + * + * ); + * } + * + * function Hello({ queryRef }) { + * const { data } = useReadQuery(queryRef); + * + * return
{data.greeting.message}
; + * } + * ``` + * + * @since 3.9.0 + * @param query - A GraphQL query document parsed into an AST by `gql`. + * @param options - Options to control how the query is executed. + * @returns A tuple in the form of `[loadQuery, queryRef, handlers]` + */ export function useLoadableQuery< TData = unknown, TVariables extends OperationVariables = OperationVariables,