Options
All
  • Public
  • Public/Protected
  • All
Menu

Module "useQuery"

Index

Interfaces

Type aliases

Functions

Type aliases

FetchMoreCallback

FetchMoreCallback<TData, TVariables>: (fetchMoreOptions: { notifyLoading?: undefined | false | true; updateQuery: (previousResult: Maybe<TData>, fetchMoreResult: Maybe<TData>) => Maybe<TData> | Promise<Maybe<TData>>; variables: Partial<TVariables> }) => Promise<Maybe<TData>>

fetchMore pagination function

You should specify a subset of the hooks variables which will merge with the specified in the hook options and a updateQuery function that should return the new data hopefully merged with the previous data.

It returns a promise of the resulting merged data and updates the hook data

Type parameters

Type declaration

    • (fetchMoreOptions: { notifyLoading?: undefined | false | true; updateQuery: (previousResult: Maybe<TData>, fetchMoreResult: Maybe<TData>) => Maybe<TData> | Promise<Maybe<TData>>; variables: Partial<TVariables> }): Promise<Maybe<TData>>

    • Parameters

      • fetchMoreOptions: { notifyLoading?: undefined | false | true; updateQuery: (previousResult: Maybe<TData>, fetchMoreResult: Maybe<TData>) => Maybe<TData> | Promise<Maybe<TData>>; variables: Partial<TVariables> }
        • Optional notifyLoading?: undefined | false | true

          Whether the hook should re-render when the network is calling fetchMore

          The default value is the same already used for notifyOnNetworkStatusChange

        • updateQuery: (previousResult: Maybe<TData>, fetchMoreResult: Maybe<TData>) => Maybe<TData> | Promise<Maybe<TData>>

          Function that receives the previous data, the result of the query just fetched.

          It should return the new data merged with the previous data.

            • (previousResult: Maybe<TData>, fetchMoreResult: Maybe<TData>): Maybe<TData> | Promise<Maybe<TData>>

            • Parameters

              • previousResult: Maybe<TData>
              • fetchMoreResult: Maybe<TData>

              Returns Maybe<TData> | Promise<Maybe<TData>>

        • variables: Partial<TVariables>

          Subset of the original variables of the query

      Returns Promise<Maybe<TData>>

PrepareQuery

PrepareQuery<Query>: <TData, TVariables, CacheKey>(__namedParameters: {}) => { cacheId: typeof cacheId; dataType: TData; prepare: (prepareArgs?: undefined | { checkCache?: undefined | false | true; headers?: Headers; variables?: TVariables }) => Promise<TData> | TData; query: typeof query; setCacheData: (data: Maybe<TData> | ((prevData: Maybe<TData>) => Maybe<TData>)) => void; useHydrateCache: (data: TData) => void; useQuery: (options?: QueryOptions<TData, TVariables, CacheKey>) => [IState<TData>, UseQueryHelpers<Query, TData, TVariables>] }

Prepare Query beforehand

Useful for:

  • Server side rendering
  • Improved type-safety
  • Prefetching queries, improving user experience

Example in Next.js

example
const HelloQuery = prepareQuery({
   cacheId: "helloWorld",
   query: (schema) => {
      return schema.hello({ arg: "world" });
   },
});

interface HelloWorldProps {
   helloWorld: typeof HelloQuery.dataType
}

export const getServerSideProps: GetServerSideProps<HelloWorldProps> =
 async () => {
   const helloWorld = await HelloQuery.prepare();

   return {
       props: {
          helloWorld
       }
   }
};

const HelloPage: NextPage<HelloWorldProps> = (props) => {
   HelloQuery.useHydrateCache(props.helloWorld);

   const [{ data }] = HelloQuery.useQuery();

   return <div>{JSON.stringify(data, null, 2)}</div>
}

Type parameters

  • Query

Type declaration

    • <TData, TVariables, CacheKey>(__namedParameters: {}): { cacheId: typeof cacheId; dataType: TData; prepare: (prepareArgs?: undefined | { checkCache?: undefined | false | true; headers?: Headers; variables?: TVariables }) => Promise<TData> | TData; query: typeof query; setCacheData: (data: Maybe<TData> | ((prevData: Maybe<TData>) => Maybe<TData>)) => void; useHydrateCache: (data: TData) => void; useQuery: (options?: QueryOptions<TData, TVariables, CacheKey>) => [IState<TData>, UseQueryHelpers<Query, TData, TVariables>] }

    • Type parameters

      Parameters

      • __namedParameters: {}

      Returns { cacheId: typeof cacheId; dataType: TData; prepare: (prepareArgs?: undefined | { checkCache?: undefined | false | true; headers?: Headers; variables?: TVariables }) => Promise<TData> | TData; query: typeof query; setCacheData: (data: Maybe<TData> | ((prevData: Maybe<TData>) => Maybe<TData>)) => void; useHydrateCache: (data: TData) => void; useQuery: (options?: QueryOptions<TData, TVariables, CacheKey>) => [IState<TData>, UseQueryHelpers<Query, TData, TVariables>] }

      • cacheId: typeof cacheId

        Gives back the cacheId.

        It should be used in the sharedCacheID option in useQuery.

      • dataType: TData

        Returns only the data type expected from the query function.

        It only works as a TypeScript helper, in runtime it's undefined, therefore it should only be used with typeof.

      • prepare: (prepareArgs?: undefined | { checkCache?: undefined | false | true; headers?: Headers; variables?: TVariables }) => Promise<TData> | TData

        Prepare the query and returns a promise of the data

          • (prepareArgs?: undefined | { checkCache?: undefined | false | true; headers?: Headers; variables?: TVariables }): Promise<TData> | TData

          • Parameters

            • Optional prepareArgs: undefined | { checkCache?: undefined | false | true; headers?: Headers; variables?: TVariables }

            Returns Promise<TData> | TData

      • query: typeof query

        Gives back the query function.

        It should be used in the first parameter of useQuery.

      • setCacheData: (data: Maybe<TData> | ((prevData: Maybe<TData>) => Maybe<TData>)) => void

        Set the cache data manually

          • Parameters

            Returns void

      • useHydrateCache: (data: TData) => void

        Hydrate the cache in the first mount, preventing network calls.

          • (data: TData): void

          • Parameters

            • data: TData

            Returns void

      • useQuery: (options?: QueryOptions<TData, TVariables, CacheKey>) => [IState<TData>, UseQueryHelpers<Query, TData, TVariables>]

        Shorthand useQuery hook, it only accepts the options

QueryCallback

QueryCallback<TData, Query, TVariables>: (queryArgs?: QueryCallbackArgs<Query, TData, TVariables>) => Promise<Maybe<TData>>

Fully featured hook callback

Type parameters

Type declaration

QueryFn

QueryFn<Query, TData, TVariables>: (schema: Client<Query>["query"], variables: TVariables) => TData

Query function, it receives the query schema from gqless and the variables, if any.

It should return the data expected from the hook.

Type parameters

Type declaration

    • (schema: Client<Query>["query"], variables: TVariables): TData

    • Parameters

      • schema: Client<Query>["query"]
      • variables: TVariables

      Returns TData

QueryQuickCallback

QueryQuickCallback<TData, TVariables>: (queryArgs?: QueryQuickCallbackArgs<TVariables>) => Promise<Maybe<TData>>

Shorthand hook callback, only variables to specify

Type parameters

Type declaration

UseQuery

UseQuery<Query>: <TData, TVariables, CacheKey>(queryFn: QueryFn<Query, TData, TVariables>, options?: QueryOptions<TData, TVariables, CacheKey>) => [IState<TData>, UseQueryHelpers<Query, TData, TVariables>]

useQuery hook

Type parameters

  • Query

Type declaration

Functions

Const createUseQuery

Generated using TypeDoc