Skip to content

Commit 4e45d7c

Browse files
birkskyumbirkskyum
authored
fix(solid-query): keep solid-query on just createQuery syntax (#8947)
1 parent 8f03e59 commit 4e45d7c

44 files changed

Lines changed: 792 additions & 688 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/config.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -757,8 +757,8 @@
757757
"label": "solid",
758758
"children": [
759759
{
760-
"label": "useQuery",
761-
"to": "framework/solid/reference/useQuery"
760+
"label": "createQuery",
761+
"to": "framework/solid/reference/createQuery"
762762
}
763763
]
764764
},

‎docs/framework/solid/overview.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,13 +73,13 @@ In the example below, you can see Solid Query in its most basic and simple form
7373
```tsx
7474
import { ErrorBoundary, Suspense } from 'solid-js'
7575
import {
76-
useQuery,
76+
createQuery,
7777
QueryClient,
7878
QueryClientProvider,
7979
} from '@tanstack/solid-query'
8080

8181
function App() {
82-
const repositoryQuery = useQuery(() => ({
82+
const repositoryQuery = createQuery(() => ({
8383
queryKey: ['TanStack Query'],
8484
queryFn: async () => {
8585
const result = await fetch('https://api.github.com/repos/TanStack/query')

‎docs/framework/solid/quick-start.md‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@ The `@tanstack/solid-query` package provides a 1st-class API for using TanStack
1111
import {
1212
QueryClient,
1313
QueryClientProvider,
14-
useQuery,
14+
createQuery,
1515
} from '@tanstack/solid-query'
1616
import { Switch, Match, For } from 'solid-js'
1717

1818
const queryClient = new QueryClient()
1919

2020
function Example() {
21-
const query = useQuery(() => ({
21+
const query = createQuery(() => ({
2222
queryKey: ['todos'],
2323
queryFn: fetchTodos,
2424
}))
@@ -53,7 +53,7 @@ function App() {
5353

5454
Solid Query offers useful primitives and functions that will make managing server state in SolidJS apps easier.
5555

56-
- `useQuery`
56+
- `createQuery`
5757
- `createQueries`
5858
- `createInfiniteQueries`
5959
- `createMutation`
@@ -67,7 +67,7 @@ Solid Query offers useful primitives and functions that will make managing serve
6767

6868
Solid Query offers an API similar to React Query, but there are some key differences to be mindful of.
6969

70-
- Arguments to `solid-query` primitives (like `useQuery`, `createMutation`, `useIsFetching`) listed above are functions, so that they can be tracked in a reactive scope.
70+
- Arguments to `solid-query` primitives (like `createQuery`, `createMutation`, `useIsFetching`) listed above are functions, so that they can be tracked in a reactive scope.
7171

7272
```tsx
7373
// ❌ react version
@@ -77,7 +77,7 @@ useQuery({
7777
})
7878

7979
// ✅ solid version
80-
useQuery(() => ({
80+
createQuery(() => ({
8181
queryKey: ['todos', todo],
8282
queryFn: fetchTodos,
8383
}))
@@ -89,7 +89,7 @@ useQuery(() => ({
8989
import { For, Suspense } from 'solid-js'
9090

9191
function Example() {
92-
const query = useQuery(() => ({
92+
const query = createQuery(() => ({
9393
queryKey: ['todos'],
9494
queryFn: fetchTodos,
9595
}))
@@ -112,7 +112,7 @@ function Example() {
112112
import {
113113
QueryClient,
114114
QueryClientProvider,
115-
useQuery,
115+
createQuery,
116116
} from '@tanstack/solid-query'
117117
import { Match, Switch } from 'solid-js'
118118

@@ -137,7 +137,7 @@ function Example() {
137137
// })
138138

139139
// ✅ solid version -- does not support destructuring outside reactive context
140-
const query = useQuery(() => ({
140+
const query = createQuery(() => ({
141141
queryKey: ['repoData'],
142142
queryFn: () =>
143143
fetch('https://api.github.com/repos/tannerlinsley/react-query').then(
@@ -170,7 +170,7 @@ function Example() {
170170
import {
171171
QueryClient,
172172
QueryClientProvider,
173-
useQuery,
173+
createQuery,
174174
} from '@tanstack/solid-query'
175175
import { createSignal, For } from 'solid-js'
176176

@@ -182,13 +182,13 @@ function Example() {
182182

183183
// ✅ passing a signal directly is safe and observers update
184184
// automatically when the value of a signal changes
185-
const todosQuery = useQuery(() => ({
185+
const todosQuery = createQuery(() => ({
186186
queryKey: ['todos'],
187187
queryFn: fetchTodos,
188188
enabled: enabled(),
189189
}))
190190

191-
const todoDetailsQuery = useQuery(() => ({
191+
const todoDetailsQuery = createQuery(() => ({
192192
queryKey: ['todo', todo()],
193193
queryFn: fetchTodo,
194194
enabled: todo() > 0,

docs/framework/solid/reference/useQuery.md renamed to docs/framework/solid/reference/createQuery.md

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
2-
id: useQuery
3-
title: useQuery
2+
id: createQuery
3+
title: createQuery
44
---
55

66
```tsx
@@ -28,7 +28,7 @@ const {
2828
isSuccess,
2929
refetch,
3030
status,
31-
} = useQuery(
31+
} = createQuery(
3232
() => ({
3333
queryKey,
3434
queryFn,
@@ -60,17 +60,17 @@ const {
6060

6161
## Usage example
6262

63-
Here are some examples of how to use the `useQuery` primitive in Solid Query.
63+
Here are some examples of how to use the `createQuery` primitive in Solid Query.
6464

6565
### Basic
6666

67-
The most basic usage of `useQuery` is to create a query that fetches data from an API.
67+
The most basic usage of `createQuery` is to create a query that fetches data from an API.
6868

6969
```tsx
70-
import { useQuery } from '@tanstack/solid-query'
70+
import { createQuery } from '@tanstack/solid-query'
7171

7272
function App() {
73-
const todos = useQuery(() => ({
73+
const todos = createQuery(() => ({
7474
queryKey: 'todos',
7575
queryFn: async () => {
7676
const response = await fetch('/api/todos')
@@ -104,15 +104,15 @@ function App() {
104104

105105
### Reactive Options
106106

107-
The reason why `useQuery` accepts a function that returns an object is to allow for reactive options. This is useful when query options depend on other values/signals that might change over time. Solid Query can track the passed function in a reactive scope and re-run it whenever the dependencies change.
107+
The reason why `createQuery` accepts a function that returns an object is to allow for reactive options. This is useful when query options depend on other values/signals that might change over time. Solid Query can track the passed function in a reactive scope and re-run it whenever the dependencies change.
108108

109109
```tsx
110-
import { useQuery } from '@tanstack/solid-query'
110+
import { createQuery } from '@tanstack/solid-query'
111111

112112
function App() {
113113
const [filter, setFilter] = createSignal('all')
114114

115-
const todos = useQuery(() => ({
115+
const todos = createQuery(() => ({
116116
queryKey: ['todos', filter()],
117117
queryFn: async () => {
118118
const response = await fetch(`/api/todos?filter=${filter()}`)
@@ -151,13 +151,13 @@ function App() {
151151

152152
### Usage with `Suspense`
153153

154-
`useQuery` supports triggering SolidJS `Suspense` and `ErrorBoundary` components when the query is in a pending or error state. This allows you to easily handle loading and error states in your components.
154+
`createQuery` supports triggering SolidJS `Suspense` and `ErrorBoundary` components when the query is in a pending or error state. This allows you to easily handle loading and error states in your components.
155155

156156
```tsx
157-
import { useQuery } from '@tanstack/solid-query'
157+
import { createQuery } from '@tanstack/solid-query'
158158

159159
function App() {
160-
const todos = useQuery(() => ({
160+
const todos = createQuery(() => ({
161161
queryKey: 'todos',
162162
queryFn: async () => {
163163
const response = await fetch('/api/todos')
@@ -184,7 +184,7 @@ function App() {
184184
}
185185
```
186186

187-
## `useQuery` Parameters
187+
## `createQuery` Parameters
188188

189189
- ### Query Options - `Accessor<QueryOptions>`
190190

@@ -298,9 +298,9 @@ function App() {
298298
- Optional
299299
- Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
300300

301-
## `useQuery` Return Value - `Store<QueryResult<TData, TError>>`
301+
## `createQuery` Return Value - `Store<QueryResult<TData, TError>>`
302302

303-
`useQuery` returns a SolidJS store with the following properties:
303+
`createQuery` returns a SolidJS store with the following properties:
304304

305305
- ##### `status: QueryStatus`
306306
- Will be:

‎docs/framework/solid/typescript.md‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ Things to keep in mind:
1717
Types in Solid Query generally flow through very well so that you don't have to provide type annotations for yourself
1818

1919
```tsx
20-
import { useQuery } from '@tanstack/solid-query'
20+
import { createQuery } from '@tanstack/solid-query'
2121

22-
const query = useQuery(() => ({
22+
const query = createQuery(() => ({
2323
queryKey: ['number'],
2424
queryFn: () => Promise.resolve(5),
2525
}))
@@ -31,9 +31,9 @@ query.data
3131
[typescript playground](https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgYygUwIYzQRQK5pQCecAvnAGZQQhwDkAAjBgHYDOzyA1gPRsQAbYABMAtAEcCxOgFgAUPOQR28SYRIBeFOiy4pRABQGAlHA0A+OAYTy4duGuIBpNEQBccANp0WeEACNCOgBdABo4W3tHIgAxFg8TM0sABWoQYDY0ADp0fgEANzQDAFZjeVJjMoU5aKzhLAx5Hh57OAA9AH55brkgA)
3232

3333
```tsx
34-
import { useQuery } from '@tanstack/solid-query'
34+
import { createQuery } from '@tanstack/solid-query'
3535

36-
const query = useQuery(() => ({
36+
const query = createQuery(() => ({
3737
queryKey: ['test'],
3838
queryFn: () => Promise.resolve(5),
3939
select: (data) => data.toString(),
@@ -51,7 +51,7 @@ This works best if your `queryFn` has a well-defined returned type. Keep in mind
5151
const fetchGroups = (): Promise<Group[]> =>
5252
axios.get('/groups').then((response) => response.data)
5353

54-
const query = useQuery(() => ({
54+
const query = createQuery(() => ({
5555
queryKey: ['groups'],
5656
queryFn: fetchGroups,
5757
}))
@@ -67,7 +67,7 @@ query.data
6767
Solid Query uses a [discriminated union type](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-func.html#discriminated-unions) for the query result, discriminated by the `status` field and the derived status boolean flags. This will allow you to check for e.g. `success` status to make `data` defined:
6868

6969
```tsx
70-
const query = useQuery(() => ({
70+
const query = createQuery(() => ({
7171
queryKey: ['number'],
7272
queryFn: () => Promise.resolve(5),
7373
}))
@@ -85,7 +85,7 @@ if (query.isSuccess) {
8585
The type for error defaults to `Error`, because that is what most users expect.
8686

8787
```tsx
88-
const query = useQuery(() => ({
88+
const query = createQuery(() => ({
8989
queryKey: ['groups'],
9090
queryFn: fetchGroups,
9191
}))
@@ -99,7 +99,7 @@ query.error
9999
If you want to throw a custom error, or something that isn't an `Error` at all, you can specify the type of the error field:
100100

101101
```tsx
102-
const query = useQuery<Group[], string>(() => ({
102+
const query = createQuery<Group[], string>(() => ({
103103
queryKey: ['groups'],
104104
queryFn: fetchGroups,
105105
}))
@@ -113,7 +113,7 @@ However, this has the drawback that type inference for all other generics of `us
113113
```tsx
114114
import axios from 'axios'
115115

116-
const query = useQuery(() => ({
116+
const query = createQuery(() => ({
117117
queryKey: ['groups'],
118118
queryFn: fetchGroups,
119119
}))
@@ -142,7 +142,7 @@ declare module '@tanstack/solid-query' {
142142
}
143143
}
144144

145-
const query = useQuery(() => ({
145+
const query = createQuery(() => ({
146146
queryKey: ['groups'],
147147
queryFn: fetchGroups,
148148
}))
@@ -153,7 +153,7 @@ query.error
153153

154154
## Registering global `Meta`
155155

156-
Similarly to registering a [global error type](#registering-a-global-error) you can also register a global `Meta` type. This ensures the optional `meta` field on [queries](../useQuery) and [mutations](../createMutation) stays consistent and is type-safe. Note that the registered type must extend `Record<string, unknown>` so that `meta` remains an object.
156+
Similarly to registering a [global error type](#registering-a-global-error) you can also register a global `Meta` type. This ensures the optional `meta` field on [queries](../createQuery) and [mutations](../createMutation) stays consistent and is type-safe. Note that the registered type must extend `Record<string, unknown>` so that `meta` remains an object.
157157

158158
```ts
159159
import '@tanstack/solid-query'
@@ -172,7 +172,7 @@ declare module '@tanstack/solid-query' {
172172

173173
## Typing Query Options
174174

175-
If you inline query options into `useQuery`, you'll get automatic type inference. However, you might want to extract the query options into a separate function to share them between `useQuery` and e.g. `prefetchQuery`. In that case, you'd lose type inference. To get it back, you can use `queryOptions` helper:
175+
If you inline query options into `createQuery`, you'll get automatic type inference. However, you might want to extract the query options into a separate function to share them between `createQuery` and e.g. `prefetchQuery`. In that case, you'd lose type inference. To get it back, you can use `queryOptions` helper:
176176

177177
```ts
178178
import { queryOptions } from '@tanstack/solid-query'
@@ -185,7 +185,7 @@ function groupOptions() {
185185
})
186186
}
187187

188-
useQuery(groupOptions)
188+
createQuery(groupOptions)
189189
queryClient.prefetchQuery(groupOptions())
190190
```
191191

‎examples/solid/astro/src/components/SolidApp.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import {
22
QueryClient,
33
QueryClientProvider,
4+
createQuery,
45
keepPreviousData,
5-
useQuery,
66
} from '@tanstack/solid-query'
77
import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
88
import {
@@ -13,9 +13,9 @@ import {
1313
createSignal,
1414
useContext,
1515
} from 'solid-js'
16-
import { isServer } from 'solid-js/web'
17-
import { getSearchParams, properCase } from '../utils'
1816
import { Link } from './Link'
17+
import { getSearchParams, properCase } from '../utils'
18+
import { isServer } from 'solid-js/web'
1919

2020
const PokemonIdContext = createContext<() => string>()
2121

@@ -72,7 +72,7 @@ const PokemonDetails = () => {
7272
}
7373

7474
const PokemonDex = (props: { id: string }) => {
75-
const pokemon = useQuery(() => ({
75+
const pokemon = createQuery(() => ({
7676
queryKey: ['pokemon', props.id],
7777
queryFn: async () => {
7878
const res = await fetch(
@@ -83,7 +83,7 @@ const PokemonDex = (props: { id: string }) => {
8383
placeholderData: keepPreviousData,
8484
}))
8585

86-
const pokemon_stats = useQuery(() => ({
86+
const pokemon_stats = createQuery(() => ({
8787
queryKey: ['pokemon', props.id],
8888
queryFn: async () => {
8989
const res = await fetch(
@@ -111,7 +111,7 @@ const PokemonDex = (props: { id: string }) => {
111111
reconcile: 'name',
112112
}))
113113

114-
const is_server_rendered = useQuery(() => ({
114+
const is_server_rendered = createQuery(() => ({
115115
queryKey: ['is_server_rendered', props.id],
116116
queryFn: () => {
117117
if (isServer) return true
@@ -191,7 +191,7 @@ const PokemonDex = (props: { id: string }) => {
191191
const SideNav = () => {
192192
const id = usePokemonID()
193193

194-
const pokemonsList = useQuery(() => ({
194+
const pokemonsList = createQuery(() => ({
195195
queryKey: ['pokemons'],
196196
queryFn: async () => {
197197
const res = await fetch(

0 commit comments

Comments
 (0)