update simple example

Author: KurtGokhan

examples/vite/src/examples/raw/example.tsx

@@ -0,0 +1,45 @@
+import { QueryClient, queryOptions, useMutation, useQuery } from '@tanstack/react-query';
+
+type ArticleData = { id: number; title: string; body: string; userId: number };
+
+const client = new QueryClient();
+
+const articlesQuery = queryOptions<ArticleData[]>({
+  queryKey: ['articles'],
+  queryFn: () => fetch('https://api.example.com/articles').then((res) => res.json()),
+});
+
+export function App() {
+  const { isLoading, data } = useQuery(articlesQuery);
+
+  return (
+    <>
+      {isLoading && <p>Loading...</p>}
+
+      {data?.map((article) => (
+        <ArticleView key={article.id} article={article} />
+      ))}
+    </>
+  );
+}
+
+function ArticleView({ article }: { article: ArticleData }) {
+  const { mutateAsync, isPending } = useMutation({
+    mutationFn: (params: { id: number }) => {
+      return fetch(`https://api.example.com/articles/${params.id}`, { method: 'DELETE' });
+    },
+    onSuccess: () => client.invalidateQueries({ queryKey: articlesQuery.queryKey }),
+  });
+  const onDelete = () => mutateAsync({ id: article.id });
+
+  return (
+    <div key={article.id}>
+      <h2>{article.title}</h2>
+      <p>{article.body}</p>
+
+      <button onClick={onDelete} disabled={isPending}>
+        Delete
+      </button>
+    </div>
+  );
+}

examples/vite/src/examples/simple/example.tsx

@@ -5,40 +5,44 @@ type ArticleData = { id: number; title: string; body: string; userId: number };
 
 const client = new QueryClient();
 
-const builder = new HttpQueryBuilder().withClient(client).withBaseUrl('https://api.example.com').withTagTypes<{
-  articles: ArticleData[];
-  refreshable: unknown;
-}>();
+const builder = new HttpQueryBuilder().withClient(client).withBaseUrl('https://api.example.com');
 
-const articlesQuery = builder.withTags('refreshable', 'articles').withPath('/articles').withData<ArticleData[]>();
+const articlesQuery = builder //
+  .withPath('/articles')
+  .withData<ArticleData[]>()
+  .withTags('articles');
 
-const deleteArticleMutation = builder.withUpdates('articles').withMethod('delete').withPath('/articles/:id');
+const deleteArticleMutation = builder //
+  .withMethod('delete')
+  .withPath('/articles/:id')
+  .withUpdates('articles');
 
-export function MyApp() {
-  const [refresh, { isPending: isRefreshing }] = builder.tags.useOperation({ tags: 'refreshable' });
-  const articles = articlesQuery.useQuery({});
-  const deleteArticle = deleteArticleMutation.useMutation();
-
-  const onDelete = (id: number) => deleteArticle.mutateAsync({ params: { id } });
-
-  if (!articles.isSuccess) return <>Loading...</>;
+export function App() {
+  const { isLoading, data } = articlesQuery.useQuery({});
 
   return (
     <>
-      <button onClick={() => refresh()} disabled={isRefreshing}>
-        Refresh all articles
-      </button>
+      {isLoading && <p>Loading...</p>}
 
-      {articles.data.map((article) => (
-        <div key={article.id}>
-          <h2>{article.title}</h2>
-          <p>{article.body}</p>
-
-          <button onClick={() => onDelete(article.id)} disabled={deleteArticle.isPending}>
-            Delete
-          </button>
-        </div>
+      {data?.map((article) => (
+        <ArticleView key={article.id} article={article} />
       ))}
     </>
   );
 }
+
+function ArticleView({ article }: { article: ArticleData }) {
+  const { mutateAsync, isPending } = deleteArticleMutation.useMutation();
+  const onDelete = () => mutateAsync({ params: { id: article.id } });
+
+  return (
+    <div key={article.id}>
+      <h2>{article.title}</h2>
+      <p>{article.body}</p>
+
+      <button disabled={isPending} onClick={onDelete}>
+        Delete
+      </button>
+    </div>
+  );
+}

packages/tanstack-query-builder/src/builder/QueryBuilderFrozen.ts

@@ -179,7 +179,7 @@ export class QueryBuilderFrozen<
   //#region Queries
 
   private useQueriesInternal(
-    useHook: typeof useQueries | typeof useSuspenseQueries,
+    useQueriesImpl: typeof useQueries | typeof useSuspenseQueries,
     ...[queries, sharedVars, sharedOpts]: UseQueriesArgs<TVars, TData, TError, TKey>
   ): BuilderQueriesResult<TVars, TData, TError, TKey> {
     assertThis(this);
@@ -192,7 +192,7 @@ export class QueryBuilderFrozen<
       this.getQueryOptions(this.mergeVars([sharedVars!, vars as any]), mergeBuilderOptions([sharedOpts, options]), 'queries'),
     );
 
-    const result = useHook({ queries: queryList }) as ResultType;
+    const result = useQueriesImpl({ queries: queryList }) as ResultType;
 
     const queryMap: ResultType['queryMap'] = {};
     for (let index = 0; index < mapKeys.length; index++) {

website/docs/api/http.mdx

@@ -7,6 +7,12 @@ Various options can be passed to the HTTP client on each request. These options
 
 ## Options
 
+The following options can be passed to the HTTP client on each request.
+
+Note that some of these options will not be used in the construction of the query key, meaning that they will not refetch the query when they change.
+Options that may change the response will be used in key creation.
+These are `method`, `baseUrl`, `path`, `params`, `search`, `headers`, `body`, `responseType` and additionally `key`.
+
 ### `method`
 
 The HTTP method to be used for the request. It's `GET` by default and can also be `POST`, `PUT`, `DELETE`, `PATCH`, `HEAD`, `OPTIONS`, or `TRACE`.