Skip to content

Commit

Permalink
Add docblock for useLoadableQuery
Browse files Browse the repository at this point in the history
  • Loading branch information
jerelmiller committed Jan 25, 2024
1 parent 2be5751 commit 00e075c
Showing 1 changed file with 45 additions and 0 deletions.
45 changes: 45 additions & 0 deletions src/react/hooks/useLoadableQuery.ts
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,51 @@ export function useLoadableQuery<
options?: LoadableQueryHookOptions
): UseLoadableQueryResult<TData, 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 (
* <>
* <button onClick={() => loadGreeting({ language: "english" })}>
* Load greeting
* </button>
* <Suspense fallback={<div>Loading...</div>}>
* {queryRef && <Hello queryRef={queryRef} />}
* </Suspense>
* </>
* );
* }
*
* function Hello({ queryRef }) {
* const { data } = useReadQuery(queryRef);
*
* return <div>{data.greeting.message}</div>;
* }
* ```
*
* @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,
Expand Down

0 comments on commit 00e075c

Please sign in to comment.