chore(solid-query): update examples, integration, docs (TanStack#8941)

* chore(solid-query): update examples/intergration

* update docs

Author: birkskyum

docs/config.json

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

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

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

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 { Link } from './Link'
-import { getSearchParams, properCase } from '../utils'
 import { isServer } from 'solid-js/web'
+import { getSearchParams, properCase } from '../utils'
+import { Link } from './Link'
 
 const PokemonIdContext = createContext<() => string>()
 
@@ -72,7 +72,7 @@ const PokemonDetails = () => {
 }
 
 const PokemonDex = (props: { id: string }) => {
-  const pokemon = createQuery(() => ({
+  const pokemon = useQuery(() => ({
     queryKey: ['pokemon', props.id],
     queryFn: async () => {
       const res = await fetch(
@@ -83,7 +83,7 @@ const PokemonDex = (props: { id: string }) => {
     placeholderData: keepPreviousData,
   }))
 
-  const pokemon_stats = createQuery(() => ({
+  const pokemon_stats = useQuery(() => ({
     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 = createQuery(() => ({
+  const is_server_rendered = useQuery(() => ({
     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 = createQuery(() => ({
+  const pokemonsList = useQuery(() => ({
     queryKey: ['pokemons'],
     queryFn: async () => {
       const res = await fetch(

examples/solid/basic-graphql-request/src/index.tsx

@@ -2,7 +2,7 @@
 import {
   QueryClient,
   QueryClientProvider,
-  createQuery,
+  useQuery,
 } from '@tanstack/solid-query'
 import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
 import { For, Match, Switch, createSignal } from 'solid-js'
@@ -46,7 +46,7 @@ function App() {
 }
 
 function createPosts() {
-  return createQuery(() => ({
+  return useQuery(() => ({
     queryKey: ['posts'],
     queryFn: async () => {
       const {
@@ -117,7 +117,7 @@ function Posts(props: { setPostId: Setter<number> }) {
 }
 
 function createPost(postId: Accessor<number>) {
-  return createQuery(() => ({
+  return useQuery(() => ({
     queryKey: ['post', postId()],
     queryFn: async () => {
       const { post } = await request<{ post: Post }>(

examples/solid/basic/src/index.tsx

@@ -2,7 +2,7 @@
 import {
   QueryClient,
   QueryClientProvider,
-  createQuery,
+  useQuery,
 } from '@tanstack/solid-query'
 import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
 import { For, Match, Switch, createSignal } from 'solid-js'
@@ -24,7 +24,7 @@ type Post = {
 }
 
 function createPosts() {
-  return createQuery(() => ({
+  return useQuery(() => ({
     queryKey: ['posts'],
     queryFn: async (): Promise<Array<Post>> => {
       const response = await fetch('https://jsonplaceholder.typicode.com/posts')
@@ -88,7 +88,7 @@ const getPostById = async (id: number): Promise<Post> => {
 }
 
 function createPost(postId: number) {
-  return createQuery(() => ({
+  return useQuery(() => ({
     queryKey: ['post', postId],
     queryFn: () => getPostById(postId),
     enabled: !!postId,

examples/solid/default-query-function/src/index.tsx

@@ -1,14 +1,14 @@
 /* @refresh reload */
-import type { QueryFunction } from '@tanstack/solid-query'
 import {
-  createQuery,
   QueryClient,
   QueryClientProvider,
+  useQuery,
 } from '@tanstack/solid-query'
 import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
-import type { Setter } from 'solid-js'
-import { createSignal, For, Match, Show, Switch } from 'solid-js'
+import { For, Match, Show, Switch, createSignal } from 'solid-js'
 import { render } from 'solid-js/web'
+import type { Setter } from 'solid-js'
+import type { QueryFunction } from '@tanstack/solid-query'
 
 // Define a default query function that will receive the query key
 const defaultQueryFn: QueryFunction<unknown> = async ({ queryKey }) => {
@@ -55,7 +55,7 @@ function App() {
 
 function Posts(props: { setPostId: Setter<number> }) {
   // All you have to do now is pass a key!
-  const state = createQuery<any[]>(() => ({ queryKey: ['/posts'] }))
+  const state = useQuery<any[]>(() => ({ queryKey: ['/posts'] }))
 
   return (
     <div>
@@ -103,7 +103,7 @@ function Posts(props: { setPostId: Setter<number> }) {
 
 function Post(props: { postId: number; setPostId: Setter<number> }) {
   // You can even leave out the queryFn and just go straight into options
-  const state = createQuery<any>(() => ({
+  const state = useQuery<any>(() => ({
     queryKey: [`/posts/${props.postId}`],
     enabled: !!props.postId,
   }))

examples/solid/simple/src/index.tsx

@@ -2,7 +2,7 @@
 import {
   QueryClient,
   QueryClientProvider,
-  createQuery,
+  useQuery,
 } from '@tanstack/solid-query'
 import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
 import { Match, Switch } from 'solid-js'
@@ -20,7 +20,7 @@ export default function App() {
 }
 
 function Example() {
-  const state = createQuery(() => ({
+  const state = useQuery(() => ({
     queryKey: ['repoData'],
     queryFn: async () => {
       const response = await fetch(

examples/solid/solid-start-streaming/src/components/post-viewer.tsx

@@ -1,11 +1,11 @@
-import { createQuery } from '@tanstack/solid-query'
-import type { Component } from 'solid-js'
+import { useQuery } from '@tanstack/solid-query'
 import { resetErrorBoundaries } from 'solid-js'
 import { createSignal } from 'solid-js'
 import { For } from 'solid-js'
-import { fetchPost } from '~/utils/api'
 import { Example } from './example'
 import { QueryBoundary } from './query-boundary'
+import type { Component } from 'solid-js'
+import { fetchPost } from '~/utils/api'
 
 export interface PostViewerProps {
   deferStream?: boolean
@@ -17,7 +17,7 @@ export const PostViewer: Component<PostViewerProps> = (props) => {
   const [simulateError, setSimulateError] = createSignal(props.simulateError)
   const [postId, setPostId] = createSignal(1)
 
-  const query = createQuery(() => ({
+  const query = useQuery(() => ({
     queryKey: ['posts', postId()],
     queryFn: () =>
       fetchPost({

examples/solid/solid-start-streaming/src/components/query-boundary.tsx

@@ -1,9 +1,9 @@
-import type { CreateQueryResult } from '@tanstack/solid-query'
-import type { JSX } from 'solid-js'
 import { ErrorBoundary, Match, Suspense, Switch, children } from 'solid-js'
+import type { UseQueryResult } from '@tanstack/solid-query'
+import type { JSX } from 'solid-js'
 
 export interface QueryBoundaryProps<T = unknown> {
-  query: CreateQueryResult<T, Error>
+  query: UseQueryResult<T, Error>
 
   /**
    * Triggered when the data is initially loading.

examples/solid/solid-start-streaming/src/components/user-info.tsx

@@ -1,9 +1,9 @@
-import { createQuery } from '@tanstack/solid-query'
-import type { Component } from 'solid-js'
+import { useQuery } from '@tanstack/solid-query'
 import { createSignal } from 'solid-js'
-import { fetchUser } from '~/utils/api'
 import { Example } from './example'
 import { QueryBoundary } from './query-boundary'
+import type { Component } from 'solid-js'
+import { fetchUser } from '~/utils/api'
 
 export interface UserInfoProps {
   deferStream?: boolean
@@ -25,7 +25,7 @@ export const userInfoQueryOpts = (props?: UserInfoProps) => ({
 export const UserInfo: Component<UserInfoProps> = (props) => {
   const [simulateError, setSimulateError] = createSignal(props.simulateError)
 
-  const query = createQuery(() =>
+  const query = useQuery(() =>
     userInfoQueryOpts({ ...props, simulateError: simulateError() }),
   )