@@ -41,36 +41,36 @@ export const SwaggerPetstore = {
4141 const = queryString ? ` /pets?${queryString } ` : ` /pets ` ;
4242 const = await fetch (url , {
4343 method: ' GET'
44- headers: { ' Content-Type' ' application/json'
44+ headers: { ' Content-Type' ' application/json' ,
4545 });
4646 if (! response .ok ) {
4747 throw new Error (` HTTP error! status: ${response .status } ` );
4848 }
4949 return response .json () as Promise <Pets >;
50- }, " listPets"
50+ }, ' listPets'
5151
5252 createPets: action (async (createPetsBody : CreatePetsBody ) => {
5353 const = await fetch (' /pets'
5454 method: ' POST'
5555 headers: { ' Content-Type' ' application/json'
56- body: JSON .stringify (createPetsBody )
56+ body: JSON .stringify (createPetsBody ),
5757 });
5858 if (! response .ok ) {
5959 throw new Error (` HTTP error! status: ${response .status } ` );
6060 }
6161 return response .json () as Promise <Pet >;
62- }, " createPets"
62+ }, ' createPets'
6363
6464 showPetById: query (async (petId : string ) => {
6565 const = await fetch (` /pets/${petId } ` , {
6666 method: ' GET'
67- headers: { ' Content-Type' ' application/json'
67+ headers: { ' Content-Type' ' application/json' ,
6868 });
6969 if (! response .ok ) {
7070 throw new Error (` HTTP error! status: ${response .status } ` );
7171 }
7272 return response .json () as Promise <Pet >;
73- }, " showPetById"
73+ }, ' showPetById'
7474};
7575```
7676
@@ -107,15 +107,15 @@ import { revalidate } from '@solidjs/router';
107107import { SwaggerPetstore } from ' ./petstore'
108108
109109// Invalidate a specific pet by ID
110- revalidate (SwaggerPetstore .showPetById .keyFor (" pet-123"
110+ revalidate (SwaggerPetstore .showPetById .keyFor (' pet-123'
111111
112112// Invalidate all pets
113113revalidate (SwaggerPetstore .listPets .key );
114114
115115// Invalidate multiple specific queries
116116revalidate ([
117- SwaggerPetstore .showPetById .keyFor (" pet-123"
118- SwaggerPetstore .showPetById .keyFor (" pet-456"
117+ SwaggerPetstore .showPetById .keyFor (' pet-123'
118+ SwaggerPetstore .showPetById .keyFor (' pet-456'
119119 SwaggerPetstore .listPets .key ,
120120]);
121121```
@@ -141,9 +141,7 @@ function PetDetails(props: { petId: string }) {
141141 <div >
142142 <h1 >{ pet ()?.name } </h1 >
143143 <p >ID: { pet ()?.id } </p >
144- <button onClick = { handleRefresh } >
145- Refresh Pet Data
146- </button >
144+ <button onClick = { handleRefresh } >Refresh Pet Data</button >
147145 </div >
148146 </Suspense
149147 );
@@ -186,11 +184,7 @@ function DeletePetButton(props: { petId: string }) {
186184 // Actions automatically revalidate all active queries on the page
187185 };
188186
189- return (
190- <button onClick = { handleDelete } >
191- Delete Pet
192- </button >
193- );
187+ return <button onClick = { handleDelete } >Delete Pet</button >;
194188}
195189```
196190
@@ -251,14 +245,11 @@ This will generate code that uses your custom instance with the Fetch API signat
251245export const = {
252246 showPetById: query (async (petId : string ) => {
253247 const = ` /pets/${petId } ` ;
254- return customInstance <Pet >(
255- url ,
256- {
257- method: ' GET'
258- headers: { ' Content-Type' ' application/json'
259- }
260- );
261- }, " showPetById"
248+ return customInstance <Pet >(url , {
249+ method: ' GET'
250+ headers: { ' Content-Type' ' application/json'
251+ });
252+ }, ' showPetById'
262253};
263254```
264255
@@ -271,11 +262,11 @@ export const customInstance = async <T>(
271262 options : RequestInit ,
272263): Promise <T > => {
273264 const = await fetch (url , options );
274-
265+
275266 if (! response .ok ) {
276267 throw new Error (` HTTP error! status: ${response .status } ` );
277268 }
278-
269+
279270 return response .json ();
280271};
281272```
@@ -286,16 +277,16 @@ export const customInstance = async <T>(
286277
287278** If you are using SolidStart, it's highly recommended to use its built-in primitives** (` query() ` and ` action() ` from ` @solidjs/router ` ) instead of Solid Query. These primitives are designed to work seamlessly with SolidStart's server-side rendering, routing, and caching systems.
288279
289- | Feature | Solid Query | SolidStart |
290- | ---------| ------------| -----------|
291- | Package | ` @tanstack/solid-query ` | ` @solidjs/router ` (via SolidStart) |
292- | Use Case | Standalone Solid apps | SolidStart applications |
293- | Query Hook | ` createQuery ` | ` query() ` |
294- | Mutation Hook | ` createMutation ` | ` action() ` |
295- | Cache Keys | Manual query key functions | Automatic via ` .key ` and ` .keyFor() ` |
296- | HTTP Client | Configurable (axios, fetch, etc.) | Native fetch API |
297- | Query Options | Full TanStack Query options | Simpler, opinionated options |
298- | SSR Integration | Manual configuration | Built-in and automatic |
280+ | Feature | Solid Query | SolidStart |
281+ | --------------- | --------------------------------- | ------------------------------------ |
282+ | Package | ` @tanstack/solid-query ` | ` @solidjs/router ` (via SolidStart) |
283+ | Use Case | Standalone Solid apps | SolidStart applications |
284+ | Query Hook | ` createQuery ` | ` query() ` |
285+ | Mutation Hook | ` createMutation ` | ` action() ` |
286+ | Cache Keys | Manual query key functions | Automatic via ` .key ` and ` .keyFor() ` |
287+ | HTTP Client | Configurable (axios, fetch, etc.) | Native fetch API |
288+ | Query Options | Full TanStack Query options | Simpler, opinionated options |
289+ | SSR Integration | Manual configuration | Built-in and automatic |
299290
300291Choose ** SolidStart client** when building a SolidStart application. Choose ** Solid Query client** only if you're building a standalone SolidJS app without the SolidStart framework and need advanced TanStack Query features like optimistic updates, background refetching, and complex caching strategies.
301292
0 commit comments