fix(solid-query): add useQuery, useInfiniteQuery, useQueries, useMutation as alternative (primary) syntax to align with react and ease maintenance

packages/solid-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, test, vi } from 'vitest'
 import { render, screen, waitFor } from '@solidjs/testing-library'
-import { QueryClient, createQueries, createQuery } from '@tanstack/solid-query'
+import { QueryClient, useQueries, useQuery } from '@tanstack/solid-query'
 import { persistQueryClientSave } from '@tanstack/query-persist-client-core'
 import { createEffect, createSignal, onMount } from 'solid-js'
 
@@ -69,7 +69,7 @@ describe('PersistQueryClientProvider', () => {
     queryClient.clear()
 
     function Page() {
-      const state = createQuery(() => ({
+      const state = useQuery(() => ({
         queryKey: key,
         queryFn: async () => {
           await sleep(10)
@@ -147,7 +147,7 @@ describe('PersistQueryClientProvider', () => {
     queryClient.clear()
 
     function Page() {
-      const [state] = createQueries(() => ({
+      const [state] = useQueries(() => ({
         queries: [
           {
             queryKey: key,
@@ -230,7 +230,7 @@ describe('PersistQueryClientProvider', () => {
     queryClient.clear()
 
     function Page() {
-      const state = createQuery(() => ({
+      const state = useQuery(() => ({
         queryKey: key,
         queryFn: async () => {
           await sleep(10)
@@ -315,7 +315,7 @@ describe('PersistQueryClientProvider', () => {
     let fetched = false
 
     function Page() {
-      const state = createQuery(() => ({
+      const state = useQuery(() => ({
         queryKey: key,
         queryFn: async () => {
           fetched = true
@@ -386,7 +386,7 @@ describe('PersistQueryClientProvider', () => {
     queryClient.clear()
 
     function Page() {
-      const state = createQuery(() => ({
+      const state = useQuery(() => ({
         queryKey: key,
         queryFn: async () => {
           await sleep(10)
@@ -432,7 +432,7 @@ describe('PersistQueryClientProvider', () => {
     const [error, persister] = createMockErrorPersister(removeClient)
 
     function Page() {
-      const state = createQuery(() => ({
+      const state = useQuery(() => ({
         queryKey: key,
         queryFn: async () => {
           await sleep(10)
@@ -530,7 +530,7 @@ describe('PersistQueryClientProvider', () => {
     }
 
     function Page() {
-      const state = createQuery(() => ({ queryKey: key }))
+      const state = useQuery(() => ({ queryKey: key }))
 
       createEffect(() =>
         states.push({

packages/solid-query/src/__tests__/QueryClientProvider.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest'
 import { render, waitFor } from '@solidjs/testing-library'
 import { QueryCache } from '@tanstack/query-core'
-import { QueryClientProvider, createQuery, useQueryClient } from '..'
+import { QueryClientProvider, useQuery, useQueryClient } from '..'
 import { createQueryClient, queryKey, sleep } from './utils'
 
 describe('QueryClientProvider', () => {
@@ -12,7 +12,7 @@ describe('QueryClientProvider', () => {
     const queryClient = createQueryClient({ queryCache })
 
     function Page() {
-      const query = createQuery(() => ({
+      const query = useQuery(() => ({
         queryKey: key,
         queryFn: async () => {
           await sleep(10)
@@ -51,7 +51,7 @@ describe('QueryClientProvider', () => {
     const queryClient2 = createQueryClient({ queryCache: queryCache2 })
 
     function Page1() {
-      const query = createQuery(() => ({
+      const query = useQuery(() => ({
         queryKey: key1,
         queryFn: async () => {
           await sleep(10)
@@ -66,7 +66,7 @@ describe('QueryClientProvider', () => {
       )
     }
     function Page2() {
-      const query = createQuery(() => ({
+      const query = useQuery(() => ({
         queryKey: key2,
         queryFn: async () => {
           await sleep(10)
@@ -115,7 +115,7 @@ describe('QueryClientProvider', () => {
     })
 
     function Page() {
-      const query = createQuery(() => ({
+      const query = useQuery(() => ({
         queryKey: key,
         queryFn: async () => {
           await sleep(10)

packages/solid-query/src/__tests__/createQueries.test-d.tsx

@@ -1,8 +1,8 @@
 import { describe, expectTypeOf, it } from 'vitest'
-import { createQueries, queryOptions } from '..'
-import type { CreateQueryResult } from '..'
+import { queryOptions, useQueries } from '..'
+import type { UseQueryResult } from '..'
 
-describe('createQueries', () => {
+describe('useQueries', () => {
   it('should return correct data for dynamic queries with mixed result types', () => {
     const Queries1 = {
       get: () =>
@@ -20,15 +20,12 @@ describe('createQueries', () => {
     }
 
     const queries1List = [1, 2, 3].map(() => ({ ...Queries1.get() }))
-    const result = createQueries(() => ({
+    const result = useQueries(() => ({
       queries: [...queries1List, { ...Queries2.get() }],
     }))
 
     expectTypeOf(result).toEqualTypeOf<
-      [
-        ...Array<CreateQueryResult<number, Error>>,
-        CreateQueryResult<boolean, Error>,
-      ]
+      [...Array<UseQueryResult<number, Error>>, UseQueryResult<boolean, Error>]
     >()
   })
 })

packages/solid-query/src/__tests__/queryOptions.test-d.tsx

@@ -1,6 +1,6 @@
 import { describe, expectTypeOf, it } from 'vitest'
 import { QueryClient, dataTagSymbol, skipToken } from '@tanstack/query-core'
-import { createQuery } from '../createQuery'
+import { useQuery } from '../useQuery'
 import { queryOptions } from '../queryOptions'
 
 describe('queryOptions', () => {
@@ -22,13 +22,13 @@ describe('queryOptions', () => {
       },
     })
   })
-  it('should work when passed to createQuery', () => {
+  it('should work when passed to useQuery', () => {
     const options = queryOptions({
       queryKey: ['key'],
       queryFn: () => Promise.resolve(5),
     })
 
-    const { data } = createQuery(() => options)
+    const { data } = useQuery(() => options)
     expectTypeOf(data).toEqualTypeOf<number | undefined>()
   })
   it('should work when passed to fetchQuery', async () => {

packages/solid-query/src/__tests__/suspense.test.tsx

@@ -9,34 +9,25 @@ import {
   createSignal,
   on,
 } from 'solid-js'
-import {
-  QueryCache,
-  QueryClientProvider,
-  createInfiniteQuery,
-  createQuery,
-} from '..'
+import { QueryCache, QueryClientProvider, useInfiniteQuery, useQuery } from '..'
 import { createQueryClient, queryKey, sleep } from './utils'
-import type {
-  CreateInfiniteQueryResult,
-  CreateQueryResult,
-  InfiniteData,
-} from '..'
+import type { InfiniteData, UseInfiniteQueryResult, UseQueryResult } from '..'
 
 describe("useQuery's in Suspense mode", () => {
   const queryCache = new QueryCache()
   const queryClient = createQueryClient({ queryCache })
 
   it('should render the correct amount of times in Suspense mode', async () => {
     const key = queryKey()
-    const states: Array<CreateQueryResult<number>> = []
+    const states: Array<UseQueryResult<number>> = []
 
     let count = 0
     let renders = 0
 
     function Page() {
       const [stateKey, setStateKey] = createSignal(key)
 
-      const state = createQuery(() => ({
+      const state = useQuery(() => ({
         queryKey: stateKey(),
         queryFn: async () => {
           count++
@@ -84,11 +75,11 @@ describe("useQuery's in Suspense mode", () => {
 
   it('should return the correct states for a successful infinite query', async () => {
     const key = queryKey()
-    const states: Array<CreateInfiniteQueryResult<InfiniteData<number>>> = []
+    const states: Array<UseInfiniteQueryResult<InfiniteData<number>>> = []
 
     function Page() {
       const [multiplier, setMultiplier] = createSignal(1)
-      const state = createInfiniteQuery(() => ({
+      const state = useInfiniteQuery(() => ({
         queryKey: [`${key}_${multiplier()}`],
         queryFn: async ({ pageParam }) => {
           await sleep(10)
@@ -152,7 +143,7 @@ describe("useQuery's in Suspense mode", () => {
     })
 
     function Page() {
-      createQuery(() => ({ queryKey: [key], queryFn, suspense: true }))
+      useQuery(() => ({ queryKey: [key], queryFn, suspense: true }))
 
       return <>rendered</>
     }
@@ -174,7 +165,7 @@ describe("useQuery's in Suspense mode", () => {
     const key = queryKey()
 
     function Page() {
-      createQuery(() => ({
+      useQuery(() => ({
         queryKey: key,
         queryFn: () => {
           sleep(10)
@@ -226,7 +217,7 @@ describe("useQuery's in Suspense mode", () => {
     let succeed = false
 
     function Page() {
-      const state = createQuery(() => ({
+      const state = useQuery(() => ({
         queryKey: key,
         queryFn: async () => {
           await sleep(10)
@@ -289,7 +280,7 @@ describe("useQuery's in Suspense mode", () => {
     let succeed = false
 
     function Page() {
-      const state = createQuery(() => ({
+      const state = useQuery(() => ({
         queryKey: key,
         queryFn: async () => {
           await sleep(10)
@@ -350,7 +341,7 @@ describe("useQuery's in Suspense mode", () => {
     let count = 0
 
     function Component() {
-      const result = createQuery(() => ({
+      const result = useQuery(() => ({
         queryKey: key,
         queryFn: async () => {
           await sleep(100)
@@ -409,7 +400,7 @@ describe("useQuery's in Suspense mode", () => {
     const key2 = queryKey()
 
     function Component(props: { queryKey: Array<string> }) {
-      const result = createQuery(() => ({
+      const result = useQuery(() => ({
         queryKey: props.queryKey,
         queryFn: async () => {
           await sleep(100)
@@ -460,7 +451,7 @@ describe("useQuery's in Suspense mode", () => {
       .mockImplementation(() => undefined)
 
     function Page() {
-      const state = createQuery(() => ({
+      const state = useQuery(() => ({
         queryKey: key,
         queryFn: async (): Promise<unknown> => {
           await sleep(10)
@@ -510,7 +501,7 @@ describe("useQuery's in Suspense mode", () => {
     const key = queryKey()
 
     function Page() {
-      const state = createQuery(() => ({
+      const state = useQuery(() => ({
         queryKey: key,
         queryFn: async (): Promise<unknown> => {
           await sleep(10)
@@ -562,7 +553,7 @@ describe("useQuery's in Suspense mode", () => {
       .mockImplementation(() => undefined)
 
     function Page() {
-      const state = createQuery(() => ({
+      const state = useQuery(() => ({
         queryKey: key,
         queryFn: async (): Promise<unknown> => {
           await sleep(10)
@@ -612,7 +603,7 @@ describe("useQuery's in Suspense mode", () => {
     const key = queryKey()
 
     function Page() {
-      const state = createQuery(() => ({
+      const state = useQuery(() => ({
         queryKey: key,
         queryFn: async (): Promise<unknown> => {
           await sleep(10)
@@ -669,7 +660,7 @@ describe("useQuery's in Suspense mode", () => {
 
     function Page() {
       const [enabled, setEnabled] = createSignal(false)
-      const result = createQuery(() => ({
+      const result = useQuery(() => ({
         queryKey: [key],
         queryFn,
         suspense: true,
@@ -715,7 +706,7 @@ describe("useQuery's in Suspense mode", () => {
     function Page() {
       const [nonce] = createSignal(0)
       const queryKeys = [`${key}-${succeed}`]
-      const result = createQuery(() => ({
+      const result = useQuery(() => ({
         queryKey: queryKeys,
         queryFn: async () => {
           await sleep(10)
@@ -784,7 +775,7 @@ describe("useQuery's in Suspense mode", () => {
     function Page() {
       const [key, setKey] = createSignal(0)
 
-      const result = createQuery(() => ({
+      const result = useQuery(() => ({
         queryKey: [`${key()}-${succeed}`],
         queryFn: async () => {
           await sleep(10)
@@ -847,7 +838,7 @@ describe("useQuery's in Suspense mode", () => {
       const queryKeys = '1'
       const [enabled, setEnabled] = createSignal(false)
 
-      const result = createQuery<string>(() => ({
+      const result = useQuery<string>(() => ({
         queryKey: [queryKeys],
         queryFn: async () => {
           await sleep(10)
@@ -906,13 +897,13 @@ describe("useQuery's in Suspense mode", () => {
 
   it('should render the correct amount of times in Suspense mode when gcTime is set to 0', async () => {
     const key = queryKey()
-    let state: CreateQueryResult<number> | null = null
+    let state: UseQueryResult<number> | null = null
 
     let count = 0
     let renders = 0
 
     function Page() {
-      state = createQuery(() => ({
+      state = useQuery(() => ({
         queryKey: key,
         queryFn: async () => {
           count++

packages/solid-query/src/__tests__/transition.test.tsx

@@ -1,18 +1,18 @@
 import { describe, it } from 'vitest'
 import { fireEvent, render, waitFor } from '@solidjs/testing-library'
 import { Show, Suspense, createSignal, startTransition } from 'solid-js'
-import { QueryCache, QueryClientProvider, createQuery } from '..'
+import { QueryCache, QueryClientProvider, useQuery } from '..'
 import { createQueryClient, queryKey, sleep } from './utils'
 
-describe("createQuery's in Suspense mode with transitions", () => {
+describe("useQuery's in Suspense mode with transitions", () => {
   const queryCache = new QueryCache()
   const queryClient = createQueryClient({ queryCache })
 
   it('should render the content when the transition is done', async () => {
     const key = queryKey()
 
     function Suspended() {
-      const state = createQuery(() => ({
+      const state = useQuery(() => ({
         queryKey: key,
         queryFn: async () => {
           await sleep(10)