add client and query api pages

Author: KurtGokhan

website/docs/api/builder.mdx

@@ -133,7 +133,8 @@ Binds all query methods to this class instance, so that they can be called after
 asFrozen(): this
 ```
 
-Returns a frozen version of this builder. The frozen version cannot be modified using `with*` methods.
+Returns a frozen version of this builder. The frozen version cannot be modified using `with*` methods, so those methods will not be available.
+The methods in the [Query API](./query) will still be available.
 
 ### client
 

website/docs/api/client.mdx

@@ -1,6 +1,46 @@
 ---
 title: Client API
 sidebar_position: 10
+hide_table_of_contents: true
 ---
 
-Work in progress. This page is not finished yet.
+The Client API provides imperative methods, similar to how QueryClient and QueryCache can be used in Tanstack Query.
+It can be accessed via [`builder.client`](./builder#client) in the `QueryBuilder` instance. Available methods are:
+
+```ts
+ensureData(vars, queryOptions): Promise<Data>;
+ensureInfiniteData(vars, paginationOptions): Promise<InfiniteData>;
+refetch(vars, queryFilters, refetchOptions): Promise<void>;
+fetch(vars, queryOptions): Promise<Data>;
+fetchInfinite(vars, queryOptions): Promise<InfiniteData>;
+isFetching(vars, queryFilters): number;
+prefetch(vars, queryOptions): Promise<Data>;
+prefetchInfinite(vars, paginationOptions): Promise<InfiniteData>;
+reset(vars, queryFilters, resetOptions): Promise<void>;
+remove(vars, queryFilters): void;
+cancel(vars, queryFilters, cancelOptions): Promise<void>;
+invalidate(vars, queryFilters, invalidateOptions): Promise<void>;
+getData(vars, queryFilters): Data | undefined;
+setData(vars, updater, setDataOptions): Data | undefined;
+getState(vars): QueryState;
+getMutation(vars, mutationFilters): Mutation;
+isMutating(vars, mutationFilters): number;
+mutate(vars, mutationOptions): Promise<Data>;
+```
+
+The main use case for these methods is to manipulate the cache outside of React components.
+For example, you can use `ensureData` in a router before the route is loaded,
+to ensure that the data for a specific article is in the cache, and if not, fetch it from the server.
+
+Most of these methods correspond to the methods in [`QueryClient`](https://tanstack.com/query/latest/docs/reference/QueryClient) of Tanstack Query. For example, `ensureData` is similar to `ensureQueryData`, and `refetch` is similar to `refetchQueries`.
+The main difference is that these methods are pre-populated with the variables in the builder, so you don't need to pass them again. For example, suppose we have a builder like this:
+
+```ts
+const articlesQuery = builder.withPath("/articles/:id").withData<ArticleData>();
+```
+
+We can fetch the data for a specific article imperatively like this:
+
+```ts
+const article = await articlesQuery.client.fetch({ params: { id: 1 } });
+```

website/docs/api/query.mdx

@@ -3,4 +3,82 @@ title: Query API
 sidebar_position: 5
 ---
 
-Work in progress. This page is not finished yet.
+After configuring the builder, you can use it inside your React components with the hooks exposed in this page.
+
+The query builder provides a set of hooks similar to Tanstack Query itself. Each hook can be passed the variables for that builder, as well as the options object that is passed to the underlying Tanstack Query hook.
+
+Tanstack Query normally provides a set of hooks for various use cases. These are `useQuery`, `useInfiniteQuery`, `useMutation`, and `useQueries`.
+There are also some variants like `useSuspenseQuery` and `usePrefetchQuery`.
+
+## Query hooks
+
+### useQuery
+
+```ts
+useQuery(vars, queryOptions): QueryResult;
+```
+
+There are also `usePrefetchQuery` and `useSuspenseQuery` variants.
+
+### useQueries
+
+```ts
+useQueries(queries: Array<{ vars, options, mapKey }>, sharedVars, sharedOptions): QueriesResult;
+```
+
+There is also `useSuspenseQueries` variant.
+
+### useInfiniteQuery
+
+```ts
+useInfiniteQuery(vars, queryOptions): InfiniteQueryResult;
+```
+
+Infinite query methods are only available if you have configured the builder with `withPagination`.
+
+There are also `usePrefetchInfiniteQuery` and `useSuspenseInfiniteQuery` variants.
+
+### useIsFetching
+
+```ts
+useIsFetching(vars, queryFilters): number;
+```
+
+## Mutation hooks
+
+Each builder can be used for query or mutation. It's up to the developer to decide how to use it.
+The underlying query/mutation functions are the same. Only the underlying Tanstack Query hooks, and options passed to them are different.
+
+### useMutation
+
+```ts
+useMutation(mutationOptions): UseMutationResult;
+```
+
+### useMutationState
+
+```ts
+useMutationState(vars, mutationFilters, select): Mutation | SelectedState;
+```
+
+### useIsMutating
+
+```ts
+useIsMutating(vars, mutationFilters): number;
+```
+
+## Utilities
+
+There are some utility functions that are not hooks, but can be used for more advanced use cases, such as calling underlying Tanstack Query hooks directly.
+
+```ts
+getQueryFn(operationType: 'query' | 'queries' | 'infiniteQuery'): QueryFn;
+getQueryKeyHashFn(): QueryKeyHashFn;
+getQueryKey(vars): QueryKey;
+getQueryOptions(vars, queryOptions, operationType): QueryOptions;
+getInfiniteQueryOptions(vars, paginataionOptions): InfiniteQueryOptions;
+getMutationFn(queryClient, meta): MutationFn;
+getMutationKey(): MutationKey;
+getMutationOptions(queryClient, mutationOptions): MutationOptions;
+getMutationFilters(vars, mutationFilters): MutationFilters;
+```