fix(solid-query): keep solid-query on just createQuery syntax (TanStack#8947)

Author: birkskyum

docs/config.json

@@ -757,8 +757,8 @@
           "label": "solid",
           "children": [
             {
-              "label": "useQuery",
-              "to": "framework/solid/reference/useQuery"
+              "label": "createQuery",
+              "to": "framework/solid/reference/createQuery"
             }
           ]
         },

docs/framework/solid/overview.md

@@ -73,13 +73,13 @@ In the example below, you can see Solid Query in its most basic and simple form
 ```tsx
 import { ErrorBoundary, Suspense } from 'solid-js'
 import {
-  useQuery,
+  createQuery,
   QueryClient,
   QueryClientProvider,
 } from '@tanstack/solid-query'
 
 function App() {
-  const repositoryQuery = useQuery(() => ({
+  const repositoryQuery = createQuery(() => ({
     queryKey: ['TanStack Query'],
     queryFn: async () => {
       const result = await fetch('https://api.github.com/repos/TanStack/query')

docs/framework/solid/quick-start.md

@@ -11,14 +11,14 @@ The `@tanstack/solid-query` package provides a 1st-class API for using TanStack
 import {
   QueryClient,
   QueryClientProvider,
-  useQuery,
+  createQuery,
 } from '@tanstack/solid-query'
 import { Switch, Match, For } from 'solid-js'
 
 const queryClient = new QueryClient()
 
 function Example() {
-  const query = useQuery(() => ({
+  const query = createQuery(() => ({
     queryKey: ['todos'],
     queryFn: fetchTodos,
   }))
@@ -53,7 +53,7 @@ function App() {
 
 Solid Query offers useful primitives and functions that will make managing server state in SolidJS apps easier.
 
-- `useQuery`
+- `createQuery`
 - `createQueries`
 - `createInfiniteQueries`
 - `createMutation`
@@ -67,7 +67,7 @@ Solid Query offers useful primitives and functions that will make managing serve
 
 Solid Query offers an API similar to React Query, but there are some key differences to be mindful of.
 
-- Arguments to `solid-query` primitives (like `useQuery`, `createMutation`, `useIsFetching`) listed above are functions, so that they can be tracked in a reactive scope.
+- Arguments to `solid-query` primitives (like `createQuery`, `createMutation`, `useIsFetching`) listed above are functions, so that they can be tracked in a reactive scope.
 
 ```tsx
 // ❌ react version
@@ -77,7 +77,7 @@ useQuery({
 })
 
 // ✅ solid version
-useQuery(() => ({
+createQuery(() => ({
   queryKey: ['todos', todo],
   queryFn: fetchTodos,
 }))
@@ -89,7 +89,7 @@ useQuery(() => ({
 import { For, Suspense } from 'solid-js'
 
 function Example() {
-  const query = useQuery(() => ({
+  const query = createQuery(() => ({
     queryKey: ['todos'],
     queryFn: fetchTodos,
   }))
@@ -112,7 +112,7 @@ function Example() {
 import {
   QueryClient,
   QueryClientProvider,
-  useQuery,
+  createQuery,
 } from '@tanstack/solid-query'
 import { Match, Switch } from 'solid-js'
 
@@ -137,7 +137,7 @@ function Example() {
   // })
 
   // ✅ solid version -- does not support destructuring outside reactive context
-  const query = useQuery(() => ({
+  const query = createQuery(() => ({
     queryKey: ['repoData'],
     queryFn: () =>
       fetch('https://api.github.com/repos/tannerlinsley/react-query').then(
@@ -170,7 +170,7 @@ function Example() {
 import {
   QueryClient,
   QueryClientProvider,
-  useQuery,
+  createQuery,
 } from '@tanstack/solid-query'
 import { createSignal, For } from 'solid-js'
 
@@ -182,13 +182,13 @@ function Example() {
 
   // ✅ passing a signal directly is safe and observers update
   // automatically when the value of a signal changes
-  const todosQuery = useQuery(() => ({
+  const todosQuery = createQuery(() => ({
     queryKey: ['todos'],
     queryFn: fetchTodos,
     enabled: enabled(),
   }))
 
-  const todoDetailsQuery = useQuery(() => ({
+  const todoDetailsQuery = createQuery(() => ({
     queryKey: ['todo', todo()],
     queryFn: fetchTodo,
     enabled: todo() > 0,

…cs/framework/solid/reference/useQuery.md …framework/solid/reference/createQuery.mddocs/framework/solid/reference/useQuery.md renamed to docs/framework/solid/reference/createQuery.md docs/framework/solid/reference/useQuery.md renamed to docs/framework/solid/reference/createQuery.md

@@ -1,6 +1,6 @@
 ---
-id: useQuery
-title: useQuery
+id: createQuery
+title: createQuery
 ---
 
 ```tsx
@@ -28,7 +28,7 @@ const {
   isSuccess,
   refetch,
   status,
-} = useQuery(
+} = createQuery(
   () => ({
     queryKey,
     queryFn,
@@ -60,17 +60,17 @@ const {
 
 ## Usage example
 
-Here are some examples of how to use the `useQuery` primitive in Solid Query.
+Here are some examples of how to use the `createQuery` primitive in Solid Query.
 
 ### Basic
 
-The most basic usage of `useQuery` is to create a query that fetches data from an API.
+The most basic usage of `createQuery` is to create a query that fetches data from an API.
 
 ```tsx
-import { useQuery } from '@tanstack/solid-query'
+import { createQuery } from '@tanstack/solid-query'
 
 function App() {
-  const todos = useQuery(() => ({
+  const todos = createQuery(() => ({
     queryKey: 'todos',
     queryFn: async () => {
       const response = await fetch('/api/todos')
@@ -104,15 +104,15 @@ function App() {
 
 ### Reactive Options
 
-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.
+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.
 
 ```tsx
-import { useQuery } from '@tanstack/solid-query'
+import { createQuery } from '@tanstack/solid-query'
 
 function App() {
   const [filter, setFilter] = createSignal('all')
 
-  const todos = useQuery(() => ({
+  const todos = createQuery(() => ({
     queryKey: ['todos', filter()],
     queryFn: async () => {
       const response = await fetch(`/api/todos?filter=${filter()}`)
@@ -151,13 +151,13 @@ function App() {
 
 ### Usage with `Suspense`
 
-`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.
+`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.
 
 ```tsx
-import { useQuery } from '@tanstack/solid-query'
+import { createQuery } from '@tanstack/solid-query'
 
 function App() {
-  const todos = useQuery(() => ({
+  const todos = createQuery(() => ({
     queryKey: 'todos',
     queryFn: async () => {
       const response = await fetch('/api/todos')
@@ -184,7 +184,7 @@ function App() {
 }
 ```
 
-## `useQuery` Parameters
+## `createQuery` Parameters
 
 - ### Query Options - `Accessor<QueryOptions>`
 
@@ -298,9 +298,9 @@ function App() {
   - Optional
   - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
 
-## `useQuery` Return Value - `Store<QueryResult<TData, TError>>`
+## `createQuery` Return Value - `Store<QueryResult<TData, TError>>`
 
-`useQuery` returns a SolidJS store with the following properties:
+`createQuery` returns a SolidJS store with the following properties:
 
 - ##### `status: QueryStatus`
   - Will be:

docs/framework/solid/typescript.md

@@ -17,9 +17,9 @@ Things to keep in mind:
 Types in Solid Query generally flow through very well so that you don't have to provide type annotations for yourself
 
 ```tsx
-import { useQuery } from '@tanstack/solid-query'
+import { createQuery } from '@tanstack/solid-query'
 
-const query = useQuery(() => ({
+const query = createQuery(() => ({
   queryKey: ['number'],
   queryFn: () => Promise.resolve(5),
 }))
@@ -31,9 +31,9 @@ query.data
 [typescript playground](https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgYygUwIYzQRQK5pQCecAvnAGZQQhwDkAAjBgHYDOzyA1gPRsQAbYABMAtAEcCxOgFgAUPOQR28SYRIBeFOiy4pRABQGAlHA0A+OAYTy4duGuIBpNEQBccANp0WeEACNCOgBdABo4W3tHIgAxFg8TM0sABWoQYDY0ADp0fgEANzQDAFZjeVJjMoU5aKzhLAx5Hh57OAA9AH55brkgA)
 
 ```tsx
-import { useQuery } from '@tanstack/solid-query'
+import { createQuery } from '@tanstack/solid-query'
 
-const query = useQuery(() => ({
+const query = createQuery(() => ({
   queryKey: ['test'],
   queryFn: () => Promise.resolve(5),
   select: (data) => data.toString(),
@@ -51,7 +51,7 @@ This works best if your `queryFn` has a well-defined returned type. Keep in mind
 const fetchGroups = (): Promise<Group[]> =>
   axios.get('/groups').then((response) => response.data)
 
-const query = useQuery(() => ({
+const query = createQuery(() => ({
   queryKey: ['groups'],
   queryFn: fetchGroups,
 }))
@@ -67,7 +67,7 @@ query.data
 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:
 
 ```tsx
-const query = useQuery(() => ({
+const query = createQuery(() => ({
   queryKey: ['number'],
   queryFn: () => Promise.resolve(5),
 }))
@@ -85,7 +85,7 @@ if (query.isSuccess) {
 The type for error defaults to `Error`, because that is what most users expect.
 
 ```tsx
-const query = useQuery(() => ({
+const query = createQuery(() => ({
   queryKey: ['groups'],
   queryFn: fetchGroups,
 }))
@@ -99,7 +99,7 @@ query.error
 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:
 
 ```tsx
-const query = useQuery<Group[], string>(() => ({
+const query = createQuery<Group[], string>(() => ({
   queryKey: ['groups'],
   queryFn: fetchGroups,
 }))
@@ -113,7 +113,7 @@ However, this has the drawback that type inference for all other generics of `us
 ```tsx
 import axios from 'axios'
 
-const query = useQuery(() => ({
+const query = createQuery(() => ({
   queryKey: ['groups'],
   queryFn: fetchGroups,
 }))
@@ -142,7 +142,7 @@ declare module '@tanstack/solid-query' {
   }
 }
 
-const query = useQuery(() => ({
+const query = createQuery(() => ({
   queryKey: ['groups'],
   queryFn: fetchGroups,
 }))
@@ -153,7 +153,7 @@ query.error
 
 ## Registering global `Meta`
 
-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.
+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.
 
 ```ts
 import '@tanstack/solid-query'
@@ -172,7 +172,7 @@ declare module '@tanstack/solid-query' {
 
 ## Typing Query Options
 
-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:
+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:
 
 ```ts
 import { queryOptions } from '@tanstack/solid-query'
@@ -185,7 +185,7 @@ function groupOptions() {
   })
 }
 
-useQuery(groupOptions)
+createQuery(groupOptions)
 queryClient.prefetchQuery(groupOptions())
 ```
 

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

@@ -1,8 +1,8 @@
 import {
   QueryClient,
   QueryClientProvider,
+  createQuery,
   keepPreviousData,
-  useQuery,
 } from '@tanstack/solid-query'
 import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
 import {
@@ -13,9 +13,9 @@ import {
   createSignal,
   useContext,
 } from 'solid-js'
-import { isServer } from 'solid-js/web'
-import { getSearchParams, properCase } from '../utils'
 import { Link } from './Link'
+import { getSearchParams, properCase } from '../utils'
+import { isServer } from 'solid-js/web'
 
 const PokemonIdContext = createContext<() => string>()
 
@@ -72,7 +72,7 @@ const PokemonDetails = () => {
 }
 
 const PokemonDex = (props: { id: string }) => {
-  const pokemon = useQuery(() => ({
+  const pokemon = createQuery(() => ({
     queryKey: ['pokemon', props.id],
     queryFn: async () => {
       const res = await fetch(
@@ -83,7 +83,7 @@ const PokemonDex = (props: { id: string }) => {
     placeholderData: keepPreviousData,
   }))
 
-  const pokemon_stats = useQuery(() => ({
+  const pokemon_stats = createQuery(() => ({
     queryKey: ['pokemon', props.id],
     queryFn: async () => {
       const res = await fetch(
@@ -111,7 +111,7 @@ const PokemonDex = (props: { id: string }) => {
     reconcile: 'name',
   }))
 
-  const is_server_rendered = useQuery(() => ({
+  const is_server_rendered = createQuery(() => ({
     queryKey: ['is_server_rendered', props.id],
     queryFn: () => {
       if (isServer) return true
@@ -191,7 +191,7 @@ const PokemonDex = (props: { id: string }) => {
 const SideNav = () => {
   const id = usePokemonID()
 
-  const pokemonsList = useQuery(() => ({
+  const pokemonsList = createQuery(() => ({
     queryKey: ['pokemons'],
     queryFn: async () => {
       const res = await fetch(