@tanstack/vue-query 5.0.0-alpha.6 → 5.0.0-alpha.61

package/src/useQueries.ts

@@ -0,0 +1,227 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { QueriesObserver } from '@tanstack/query-core'
+import type {
+  QueriesPlaceholderDataFunction,
+  QueryKey,
+  QueriesObserverOptions,
+  QueryFunction,
+  QueryObserverResult,
+} from '@tanstack/query-core'
+import type { Ref } from 'vue-demi'
+import { computed, onScopeDispose, readonly, ref, watch } from 'vue-demi'
+
+import { useQueryClient } from './useQueryClient'
+import { cloneDeepUnref } from './utils'
+import type { UseQueryOptions } from './useQuery'
+import type { QueryClient } from './queryClient'
+import type { DistributiveOmit, MaybeRefDeep } from './types'
+
+// This defines the `UseQueryOptions` that are accepted in `QueriesOptions` & `GetOptions`.
+// `placeholderData` function does not have a parameter
+type UseQueryOptionsForUseQueries<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> = DistributiveOmit<
+  UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  'placeholderData'
+> & {
+  placeholderData?: TQueryFnData | QueriesPlaceholderDataFunction<TQueryFnData>
+}
+
+// Avoid TS depth-limit error in case of large array literal
+type MAXIMUM_DEPTH = 20
+
+type GetOptions<T> =
+  // Part 1: responsible for applying explicit type parameter to function arguments, if object { queryFnData: TQueryFnData, error: TError, data: TData }
+  T extends {
+    queryFnData: infer TQueryFnData
+    error?: infer TError
+    data: infer TData
+  }
+    ? UseQueryOptionsForUseQueries<TQueryFnData, TError, TData>
+    : T extends { queryFnData: infer TQueryFnData; error?: infer TError }
+    ? UseQueryOptionsForUseQueries<TQueryFnData, TError>
+    : T extends { data: infer TData; error?: infer TError }
+    ? UseQueryOptionsForUseQueries<unknown, TError, TData>
+    : // Part 2: responsible for applying explicit type parameter to function arguments, if tuple [TQueryFnData, TError, TData]
+    T extends [infer TQueryFnData, infer TError, infer TData]
+    ? UseQueryOptionsForUseQueries<TQueryFnData, TError, TData>
+    : T extends [infer TQueryFnData, infer TError]
+    ? UseQueryOptionsForUseQueries<TQueryFnData, TError>
+    : T extends [infer TQueryFnData]
+    ? UseQueryOptionsForUseQueries<TQueryFnData>
+    : // Part 3: responsible for inferring and enforcing type if no explicit parameter was provided
+    T extends {
+        queryFn?: QueryFunction<infer TQueryFnData, infer TQueryKey>
+        select: (data: any) => infer TData
+      }
+    ? UseQueryOptionsForUseQueries<TQueryFnData, Error, TData, TQueryKey>
+    : T extends { queryFn?: QueryFunction<infer TQueryFnData, infer TQueryKey> }
+    ? UseQueryOptionsForUseQueries<TQueryFnData, Error, TQueryFnData, TQueryKey>
+    : // Fallback
+      UseQueryOptionsForUseQueries
+
+type GetResults<T> =
+  // Part 1: responsible for mapping explicit type parameter to function result, if object
+  T extends { queryFnData: any; error?: infer TError; data: infer TData }
+    ? QueryObserverResult<TData, TError>
+    : T extends { queryFnData: infer TQueryFnData; error?: infer TError }
+    ? QueryObserverResult<TQueryFnData, TError>
+    : T extends { data: infer TData; error?: infer TError }
+    ? QueryObserverResult<TData, TError>
+    : // Part 2: responsible for mapping explicit type parameter to function result, if tuple
+    T extends [any, infer TError, infer TData]
+    ? QueryObserverResult<TData, TError>
+    : T extends [infer TQueryFnData, infer TError]
+    ? QueryObserverResult<TQueryFnData, TError>
+    : T extends [infer TQueryFnData]
+    ? QueryObserverResult<TQueryFnData>
+    : // Part 3: responsible for mapping inferred type to results, if no explicit parameter was provided
+    T extends {
+        queryFn?: QueryFunction<unknown, any>
+        select: (data: any) => infer TData
+      }
+    ? QueryObserverResult<TData>
+    : T extends { queryFn?: QueryFunction<infer TQueryFnData, any> }
+    ? QueryObserverResult<TQueryFnData>
+    : // Fallback
+      QueryObserverResult
+
+/**
+ * UseQueriesOptions reducer recursively unwraps function arguments to infer/enforce type param
+ */
+export type UseQueriesOptions<
+  T extends any[],
+  Result extends any[] = [],
+  Depth extends ReadonlyArray<number> = [],
+> = Depth['length'] extends MAXIMUM_DEPTH
+  ? UseQueryOptionsForUseQueries[]
+  : T extends []
+  ? []
+  : T extends [infer Head]
+  ? [...Result, GetOptions<Head>]
+  : T extends [infer Head, ...infer Tail]
+  ? UseQueriesOptions<[...Tail], [...Result, GetOptions<Head>], [...Depth, 1]>
+  : unknown[] extends T
+  ? T
+  : // If T is *some* array but we couldn't assign unknown[] to it, then it must hold some known/homogenous type!
+  // use this to infer the param types in the case of Array.map() argument
+  T extends UseQueryOptionsForUseQueries<
+      infer TQueryFnData,
+      infer TError,
+      infer TData,
+      infer TQueryKey
+    >[]
+  ? UseQueryOptionsForUseQueries<TQueryFnData, TError, TData, TQueryKey>[]
+  : // Fallback
+    UseQueryOptionsForUseQueries[]
+
+/**
+ * UseQueriesResults reducer recursively maps type param to results
+ */
+export type UseQueriesResults<
+  T extends any[],
+  Result extends any[] = [],
+  Depth extends ReadonlyArray<number> = [],
+> = Depth['length'] extends MAXIMUM_DEPTH
+  ? QueryObserverResult[]
+  : T extends []
+  ? []
+  : T extends [infer Head]
+  ? [...Result, GetResults<Head>]
+  : T extends [infer Head, ...infer Tail]
+  ? UseQueriesResults<[...Tail], [...Result, GetResults<Head>], [...Depth, 1]>
+  : T extends UseQueryOptionsForUseQueries<
+      infer TQueryFnData,
+      infer TError,
+      infer TData,
+      any
+    >[]
+  ? // Dynamic-size (homogenous) UseQueryOptions array: map directly to array of results
+    QueryObserverResult<unknown extends TData ? TQueryFnData : TData, TError>[]
+  : // Fallback
+    QueryObserverResult[]
+
+type UseQueriesOptionsArg<T extends any[]> = readonly [...UseQueriesOptions<T>]
+
+export function useQueries<
+  T extends any[],
+  TCombinedResult = UseQueriesResults<T>,
+>(
+  {
+    queries,
+    ...options
+  }: {
+    queries: MaybeRefDeep<UseQueriesOptionsArg<T>>
+    combine?: (result: UseQueriesResults<T>) => TCombinedResult
+  },
+  queryClient?: QueryClient,
+): Readonly<Ref<TCombinedResult>> {
+  const client = queryClient || useQueryClient()
+
+  const defaultedQueries = computed(() =>
+    cloneDeepUnref(queries).map((queryOptions) => {
+      const defaulted = client.defaultQueryOptions(queryOptions)
+      defaulted._optimisticResults = client.isRestoring.value
+        ? 'isRestoring'
+        : 'optimistic'
+
+      return defaulted
+    }),
+  )
+
+  const observer = new QueriesObserver<TCombinedResult>(
+    client,
+    defaultedQueries.value,
+    options as QueriesObserverOptions<TCombinedResult>,
+  )
+  const [, getCombinedResult] = observer.getOptimisticResult(
+    defaultedQueries.value,
+  )
+  const state = ref(getCombinedResult()) as Ref<TCombinedResult>
+
+  const unsubscribe = ref(() => {
+    // noop
+  })
+
+  watch(
+    client.isRestoring,
+    (isRestoring) => {
+      if (!isRestoring) {
+        unsubscribe.value()
+        unsubscribe.value = observer.subscribe(() => {
+          const [, getCombinedResultRestoring] = observer.getOptimisticResult(
+            defaultedQueries.value,
+          )
+          state.value = getCombinedResultRestoring()
+        })
+        // Subscription would not fire for persisted results
+        const [, getCombinedResultPersisted] = observer.getOptimisticResult(
+          defaultedQueries.value,
+        )
+        state.value = getCombinedResultPersisted()
+      }
+    },
+    { immediate: true },
+  )
+
+  watch(
+    [defaultedQueries],
+    () => {
+      observer.setQueries(
+        defaultedQueries.value,
+        options as QueriesObserverOptions<TCombinedResult>,
+      )
+      state.value = observer.getCurrentResult()
+    },
+    { deep: true },
+  )
+
+  onScopeDispose(() => {
+    unsubscribe.value()
+  })
+
+  return readonly(state) as Readonly<Ref<TCombinedResult>>
+}

package/src/useQuery.ts

@@ -0,0 +1,125 @@
+import type { ToRefs, UnwrapRef } from 'vue-demi'
+import { QueryObserver } from '@tanstack/query-core'
+import type {
+  QueryKey,
+  QueryObserverResult,
+  DefinedQueryObserverResult,
+  WithRequired,
+  QueryObserverOptions,
+  DefaultError,
+} from '@tanstack/query-core'
+import { useBaseQuery } from './useBaseQuery'
+import type { UseBaseQueryReturnType } from './useBaseQuery'
+import type { DistributiveOmit, MaybeRefDeep } from './types'
+import type { QueryClient } from './queryClient'
+
+export type UseQueryOptions<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> = {
+  [Property in keyof QueryObserverOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryData,
+    TQueryKey
+  >]: Property extends 'queryFn'
+    ? QueryObserverOptions<
+        TQueryFnData,
+        TError,
+        TData,
+        TQueryData,
+        UnwrapRef<TQueryKey>
+      >[Property]
+    : MaybeRefDeep<
+        WithRequired<
+          QueryObserverOptions<
+            TQueryFnData,
+            TError,
+            TData,
+            TQueryData,
+            TQueryKey
+          >,
+          'queryKey'
+        >[Property]
+      >
+}
+
+export type UseQueryReturnType<TData, TError> = DistributiveOmit<
+  UseBaseQueryReturnType<TData, TError>,
+  'refetch'
+> & {
+  refetch: QueryObserverResult<TData, TError>['refetch']
+}
+
+export type UseQueryDefinedReturnType<TData, TError> = DistributiveOmit<
+  ToRefs<Readonly<DefinedQueryObserverResult<TData, TError>>>,
+  'refetch'
+> & {
+  suspense: () => Promise<QueryObserverResult<TData, TError>>
+  refetch: QueryObserverResult<TData, TError>['refetch']
+}
+
+export function useQuery<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: UseQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryFnData,
+    TQueryKey
+  > & {
+    initialData?: undefined
+  },
+  queryClient?: QueryClient,
+): UseQueryReturnType<TData, TError>
+
+export function useQuery<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: UseQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryFnData,
+    TQueryKey
+  > & {
+    initialData: TQueryFnData | (() => TQueryFnData)
+  },
+  queryClient?: QueryClient,
+): UseQueryDefinedReturnType<TData, TError>
+
+export function useQuery<
+  TQueryFnData,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: UseQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryFnData,
+    TQueryKey
+  >,
+  queryClient?: QueryClient,
+):
+  | UseQueryReturnType<TData, TError>
+  | UseQueryDefinedReturnType<TData, TError> {
+  const result = useBaseQuery(QueryObserver, options, queryClient)
+
+  return {
+    ...result,
+    refetch: result.refetch.value,
+  }
+}

package/src/useQueryClient.ts

@@ -0,0 +1,23 @@
+import { getCurrentInstance, inject } from 'vue-demi'
+
+import type { QueryClient } from './queryClient'
+import { getClientKey } from './utils'
+
+export function useQueryClient(id = ''): QueryClient {
+  const vm = getCurrentInstance()?.proxy
+
+  if (!vm) {
+    throw new Error('vue-query hooks can only be used inside setup() function.')
+  }
+
+  const key = getClientKey(id)
+  const queryClient = inject<QueryClient>(key)
+
+  if (!queryClient) {
+    throw new Error(
+      "No 'queryClient' found in Vue context, use 'VueQueryPlugin' to properly initialize the library.",
+    )
+  }
+
+  return queryClient
+}

package/src/utils.ts

@@ -0,0 +1,67 @@
+import { isRef, unref } from 'vue-demi'
+import type { MaybeRefDeep } from './types'
+
+export const VUE_QUERY_CLIENT = 'VUE_QUERY_CLIENT'
+
+export function getClientKey(key?: string) {
+  const suffix = key ? `:${key}` : ''
+  return `${VUE_QUERY_CLIENT}${suffix}`
+}
+
+export function updateState(
+  state: Record<string, unknown>,
+  update: Record<string, any>,
+): void {
+  Object.keys(state).forEach((key) => {
+    state[key] = update[key]
+  })
+}
+
+export function cloneDeep<T>(
+  value: MaybeRefDeep<T>,
+  customizer?: (val: MaybeRefDeep<T>) => T | undefined,
+): T {
+  if (customizer) {
+    const result = customizer(value)
+    // If it's a ref of undefined, return undefined
+    if (result === undefined && isRef(value)) {
+      return result as T
+    }
+    if (result !== undefined) {
+      return result
+    }
+  }
+
+  if (Array.isArray(value)) {
+    return value.map((val) => cloneDeep(val, customizer)) as unknown as T
+  }
+
+  if (typeof value === 'object' && isPlainObject(value)) {
+    const entries = Object.entries(value).map(([key, val]) => [
+      key,
+      cloneDeep(val, customizer),
+    ])
+    return Object.fromEntries(entries)
+  }
+
+  return value as T
+}
+
+export function cloneDeepUnref<T>(obj: MaybeRefDeep<T>): T {
+  return cloneDeep(obj, (val) => {
+    if (isRef(val)) {
+      return cloneDeepUnref(unref(val))
+    }
+
+    return undefined
+  })
+}
+
+function isPlainObject(value: unknown): value is Object {
+  if (Object.prototype.toString.call(value) !== '[object Object]') {
+    return false
+  }
+
+  const prototype = Object.getPrototypeOf(value)
+  return prototype === null || prototype === Object.prototype
+}

package/src/vueQueryPlugin.ts

@@ -0,0 +1,101 @@
+import { isVue2 } from 'vue-demi'
+import { isServer } from '@tanstack/query-core'
+import type { QueryClientConfig } from '@tanstack/query-core'
+
+import { QueryClient } from './queryClient'
+import { getClientKey } from './utils'
+import { setupDevtools } from './devtools/devtools'
+import type { MaybeRefDeep } from './types'
+
+type ClientPersister = (client: QueryClient) => [() => void, Promise<void>]
+
+interface CommonOptions {
+  queryClientKey?: string
+  clientPersister?: ClientPersister
+}
+
+interface ConfigOptions extends CommonOptions {
+  queryClientConfig?: MaybeRefDeep<QueryClientConfig>
+}
+
+interface ClientOptions extends CommonOptions {
+  queryClient?: QueryClient
+}
+
+export type VueQueryPluginOptions = ConfigOptions | ClientOptions
+
+export const VueQueryPlugin = {
+  install: (app: any, options: VueQueryPluginOptions = {}) => {
+    const clientKey = getClientKey(options.queryClientKey)
+    let client: QueryClient
+
+    if ('queryClient' in options && options.queryClient) {
+      client = options.queryClient
+    } else {
+      const clientConfig =
+        'queryClientConfig' in options ? options.queryClientConfig : undefined
+      client = new QueryClient(clientConfig)
+    }
+
+    if (!isServer) {
+      client.mount()
+    }
+
+    let persisterUnmount = () => {
+      // noop
+    }
+
+    if (options.clientPersister) {
+      client.isRestoring.value = true
+      const [unmount, promise] = options.clientPersister(client)
+      persisterUnmount = unmount
+      promise.then(() => {
+        client.isRestoring.value = false
+      })
+    }
+
+    const cleanup = () => {
+      client.unmount()
+      persisterUnmount()
+    }
+
+    if (app.onUnmount) {
+      app.onUnmount(cleanup)
+    } else {
+      const originalUnmount = app.unmount
+      app.unmount = function vueQueryUnmount() {
+        cleanup()
+        originalUnmount()
+      }
+    }
+
+    if (isVue2) {
+      app.mixin({
+        beforeCreate() {
+          // HACK: taken from provide(): https://github.com/vuejs/composition-api/blob/master/src/apis/inject.ts#L30
+          if (!this._provided) {
+            const provideCache = {}
+            Object.defineProperty(this, '_provided', {
+              get: () => provideCache,
+              set: (v) => Object.assign(provideCache, v),
+            })
+          }
+
+          this._provided[clientKey] = client
+
+          if (process.env.NODE_ENV === 'development') {
+            if (this === this.$root) {
+              setupDevtools(this, client)
+            }
+          }
+        },
+      })
+    } else {
+      app.provide(clientKey, client)
+
+      if (process.env.NODE_ENV === 'development') {
+        setupDevtools(app, client)
+      }
+    }
+  },
+}

package/build/lib/devtools/devtools.esm.js

@@ -1,157 +0,0 @@
-import { setupDevtoolsPlugin } from '@vue/devtools-api';
-import { rankItem } from '@tanstack/match-sorter-utils';
-import { sortFns, getQueryStateLabel, getQueryStatusFg, getQueryStatusBg } from './utils.esm.js';
-
-/* istanbul ignore file */
-const pluginId = 'vue-query';
-const pluginName = 'Vue Query';
-function setupDevtools(app, queryClient) {
-  setupDevtoolsPlugin({
-    id: pluginId,
-    label: pluginName,
-    packageName: 'vue-query',
-    homepage: 'https://tanstack.com/query/v4',
-    logo: 'https://vue-query.vercel.app/vue-query.svg',
-    app,
-    settings: {
-      baseSort: {
-        type: 'choice',
-        component: 'button-group',
-        label: 'Sort Cache Entries',
-        options: [{
-          label: 'ASC',
-          value: 1
-        }, {
-          label: 'DESC',
-          value: -1
-        }],
-        defaultValue: 1
-      },
-      sortFn: {
-        type: 'choice',
-        label: 'Sort Function',
-        options: Object.keys(sortFns).map(key => ({
-          label: key,
-          value: key
-        })),
-        defaultValue: Object.keys(sortFns)[0]
-      }
-    }
-  }, api => {
-    const queryCache = queryClient.getQueryCache();
-    api.addInspector({
-      id: pluginId,
-      label: pluginName,
-      icon: 'api',
-      nodeActions: [{
-        icon: 'cloud_download',
-        tooltip: 'Refetch',
-        action: queryHash => {
-          var _queryCache$get;
-          (_queryCache$get = queryCache.get(queryHash)) == null ? void 0 : _queryCache$get.fetch();
-        }
-      }, {
-        icon: 'alarm',
-        tooltip: 'Invalidate',
-        action: queryHash => {
-          const query = queryCache.get(queryHash);
-          queryClient.invalidateQueries(query);
-        }
-      }, {
-        icon: 'settings_backup_restore',
-        tooltip: 'Reset',
-        action: queryHash => {
-          var _queryCache$get2;
-          (_queryCache$get2 = queryCache.get(queryHash)) == null ? void 0 : _queryCache$get2.reset();
-        }
-      }, {
-        icon: 'delete',
-        tooltip: 'Remove',
-        action: queryHash => {
-          const query = queryCache.get(queryHash);
-          queryCache.remove(query);
-        }
-      }]
-    });
-    api.addTimelineLayer({
-      id: pluginId,
-      label: pluginName,
-      color: 0xffd94c
-    });
-    queryCache.subscribe(event => {
-      api.sendInspectorTree(pluginId);
-      api.sendInspectorState(pluginId);
-      if (
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      event && ['queryAdded', 'queryRemoved', 'queryUpdated'].includes(event.type)) {
-        api.addTimelineEvent({
-          layerId: pluginId,
-          event: {
-            title: event.type,
-            subtitle: event.query.queryHash,
-            time: api.now(),
-            data: {
-              queryHash: event.query.queryHash,
-              ...event
-            }
-          }
-        });
-      }
-    });
-    api.on.getInspectorTree(payload => {
-      if (payload.inspectorId === pluginId) {
-        const queries = queryCache.getAll();
-        const settings = api.getSettings();
-        const filtered = payload.filter ? queries.filter(item => rankItem(item.queryHash, payload.filter).passed) : [...queries];
-        const sorted = filtered.sort((a, b) => sortFns[settings.sortFn](a, b) * settings.baseSort);
-        const nodes = sorted.map(query => {
-          const stateLabel = getQueryStateLabel(query);
-          return {
-            id: query.queryHash,
-            label: query.queryHash,
-            tags: [{
-              label: `${stateLabel} [${query.getObserversCount()}]`,
-              textColor: getQueryStatusFg(query),
-              backgroundColor: getQueryStatusBg(query)
-            }]
-          };
-        });
-        payload.rootNodes = nodes;
-      }
-    });
-    api.on.getInspectorState(payload => {
-      if (payload.inspectorId === pluginId) {
-        const query = queryCache.get(payload.nodeId);
-        if (!query) {
-          return;
-        }
-        payload.state = {
-          ' Query Details': [{
-            key: 'Query key',
-            value: query.queryHash
-          }, {
-            key: 'Query status',
-            value: getQueryStateLabel(query)
-          }, {
-            key: 'Observers',
-            value: query.getObserversCount()
-          }, {
-            key: 'Last Updated',
-            value: new Date(query.state.dataUpdatedAt).toLocaleTimeString()
-          }],
-          'Data Explorer': [{
-            key: 'Data',
-            value: query.state.data
-          }],
-          'Query Explorer': [{
-            key: 'Query',
-            value: query
-          }]
-        };
-      }
-    });
-  });
-}
-
-export { setupDevtools };
-//# sourceMappingURL=devtools.esm.js.map