@tanstack/vue-query 5.0.0-alpha.49 → 5.0.0-alpha.50

package/src/devtools/devtools.ts

@@ -0,0 +1,249 @@
+import { setupDevtoolsPlugin } from '@vue/devtools-api'
+import type { CustomInspectorNode } from '@vue/devtools-api'
+import { rankItem } from '@tanstack/match-sorter-utils'
+import { onlineManager } from '@tanstack/query-core'
+import type { Query } from '@tanstack/query-core'
+import type { QueryClient } from '../queryClient'
+import {
+  getQueryStateLabel,
+  getQueryStatusBg,
+  getQueryStatusFg,
+  sortFns,
+} from './utils'
+
+const pluginId = 'vue-query'
+const pluginName = 'Vue Query'
+
+export function setupDevtools(app: any, queryClient: QueryClient) {
+  setupDevtoolsPlugin(
+    {
+      id: pluginId,
+      label: pluginName,
+      packageName: 'vue-query',
+      homepage: 'https://tanstack.com/query/latest',
+      logo: 'https://raw.githubusercontent.com/TanStack/query/main/packages/vue-query/media/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]!,
+        },
+        onlineMode: {
+          type: 'choice',
+          component: 'button-group',
+          label: 'Online mode',
+          options: [
+            {
+              label: 'Online',
+              value: 1,
+            },
+            {
+              label: 'Offline',
+              value: 0,
+            },
+          ],
+          defaultValue: 1,
+        },
+      },
+    },
+    (api) => {
+      const initialSettings = api.getSettings()
+      onlineManager.setOnline(Boolean(initialSettings.onlineMode.valueOf()))
+
+      const queryCache = queryClient.getQueryCache()
+
+      api.addInspector({
+        id: pluginId,
+        label: pluginName,
+        icon: 'api',
+        nodeActions: [
+          {
+            icon: 'file_download',
+            tooltip: 'Refetch',
+            action: (queryHash: string) => {
+              queryCache.get(queryHash)?.fetch()
+            },
+          },
+          {
+            icon: 'alarm',
+            tooltip: 'Invalidate',
+            action: (queryHash: string) => {
+              const query = queryCache.get(queryHash) as Query
+              queryClient.invalidateQueries(query)
+            },
+          },
+          {
+            icon: 'settings_backup_restore',
+            tooltip: 'Reset',
+            action: (queryHash: string) => {
+              queryCache.get(queryHash)?.reset()
+            },
+          },
+          {
+            icon: 'delete',
+            tooltip: 'Remove',
+            action: (queryHash: string) => {
+              const query = queryCache.get(queryHash) as Query
+              queryCache.remove(query)
+            },
+          },
+          {
+            icon: 'hourglass_empty',
+            tooltip: 'Force loading',
+            action: (queryHash: string) => {
+              const query = queryCache.get(queryHash) as Query
+
+              query.setState({
+                data: undefined,
+                status: 'pending',
+              })
+            },
+          },
+          {
+            icon: 'error_outline',
+            tooltip: 'Force error',
+            action: (queryHash: string) => {
+              const query = queryCache.get(queryHash) as Query
+
+              query.setState({
+                data: undefined,
+                status: 'error',
+                error: new Error('Unknown error from devtools'),
+              })
+            },
+          },
+        ],
+      })
+
+      api.addTimelineLayer({
+        id: pluginId,
+        label: pluginName,
+        color: 0xffd94c,
+      })
+
+      queryCache.subscribe((event) => {
+        api.sendInspectorTree(pluginId)
+        api.sendInspectorState(pluginId)
+
+        if (['added', 'removed', 'updated'].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.setPluginSettings((payload) => {
+        if (payload.key === 'onlineMode') {
+          onlineManager.setOnline(Boolean(payload.newValue))
+        }
+      })
+
+      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: CustomInspectorNode[] = 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,
+              },
+            ],
+          }
+        }
+      })
+    },
+  )
+}

package/src/devtools/utils.ts

@@ -0,0 +1,96 @@
+import type { Query } from '@tanstack/query-core'
+
+type SortFn = (a: Query, b: Query) => number
+
+// eslint-disable-next-line no-shadow
+enum QueryState {
+  Fetching = 0,
+  Fresh,
+  Stale,
+  Inactive,
+  Paused,
+}
+
+export function getQueryState(query: Query): QueryState {
+  if (query.state.fetchStatus === 'fetching') {
+    return QueryState.Fetching
+  }
+  if (query.state.fetchStatus === 'paused') {
+    return QueryState.Paused
+  }
+  if (!query.getObserversCount()) {
+    return QueryState.Inactive
+  }
+  if (query.isStale()) {
+    return QueryState.Stale
+  }
+
+  return QueryState.Fresh
+}
+
+export function getQueryStateLabel(query: Query): string {
+  const queryState = getQueryState(query)
+
+  if (queryState === QueryState.Fetching) {
+    return 'fetching'
+  }
+  if (queryState === QueryState.Paused) {
+    return 'paused'
+  }
+  if (queryState === QueryState.Stale) {
+    return 'stale'
+  }
+  if (queryState === QueryState.Inactive) {
+    return 'inactive'
+  }
+
+  return 'fresh'
+}
+
+export function getQueryStatusFg(query: Query): number {
+  const queryState = getQueryState(query)
+
+  if (queryState === QueryState.Stale) {
+    return 0x000000
+  }
+
+  return 0xffffff
+}
+
+export function getQueryStatusBg(query: Query): number {
+  const queryState = getQueryState(query)
+
+  if (queryState === QueryState.Fetching) {
+    return 0x006bff
+  }
+  if (queryState === QueryState.Paused) {
+    return 0x8c49eb
+  }
+  if (queryState === QueryState.Stale) {
+    return 0xffb200
+  }
+  if (queryState === QueryState.Inactive) {
+    return 0x3f4e60
+  }
+
+  return 0x008327
+}
+
+const queryHashSort: SortFn = (a, b) => a.queryHash.localeCompare(b.queryHash)
+
+const dateSort: SortFn = (a, b) =>
+  a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1
+
+const statusAndDateSort: SortFn = (a, b) => {
+  if (getQueryState(a) === getQueryState(b)) {
+    return dateSort(a, b)
+  }
+
+  return getQueryState(a) > getQueryState(b) ? 1 : -1
+}
+
+export const sortFns: Record<string, SortFn> = {
+  'Status > Last Updated': statusAndDateSort,
+  'Query Hash': queryHashSort,
+  'Last Updated': dateSort,
+}

package/src/index.ts

@@ -0,0 +1,30 @@
+export * from '@tanstack/query-core'
+
+export { useQueryClient } from './useQueryClient'
+export { VueQueryPlugin } from './vueQueryPlugin'
+
+export { QueryClient } from './queryClient'
+export { QueryCache } from './queryCache'
+export { MutationCache } from './mutationCache'
+export { useQuery } from './useQuery'
+export { useQueries } from './useQueries'
+export { useInfiniteQuery } from './useInfiniteQuery'
+export { useMutation } from './useMutation'
+export { useIsFetching } from './useIsFetching'
+export { useIsMutating, useMutationState } from './useMutationState'
+export { VUE_QUERY_CLIENT } from './utils'
+
+export type {
+  UseQueryOptions,
+  UseQueryReturnType,
+  UseQueryDefinedReturnType,
+} from './useQuery'
+export type {
+  UseInfiniteQueryOptions,
+  UseInfiniteQueryReturnType,
+} from './useInfiniteQuery'
+export type { UseMutationOptions, UseMutationReturnType } from './useMutation'
+export type { UseQueriesOptions, UseQueriesResults } from './useQueries'
+export type { MutationFilters, MutationStateOptions } from './useMutationState'
+export type { QueryFilters } from './useIsFetching'
+export type { VueQueryPluginOptions } from './vueQueryPlugin'

package/src/mutationCache.ts

@@ -0,0 +1,25 @@
+import { MutationCache as MC } from '@tanstack/query-core'
+import type {
+  Mutation,
+  MutationFilters,
+  DefaultError,
+} from '@tanstack/query-core'
+import type { MaybeRefDeep } from './types'
+import { cloneDeepUnref } from './utils'
+
+export class MutationCache extends MC {
+  find<
+    TData = unknown,
+    TError = DefaultError,
+    TVariables = any,
+    TContext = unknown,
+  >(
+    filters: MaybeRefDeep<MutationFilters>,
+  ): Mutation<TData, TError, TVariables, TContext> | undefined {
+    return super.find(cloneDeepUnref(filters))
+  }
+
+  findAll(filters: MaybeRefDeep<MutationFilters> = {}): Mutation[] {
+    return super.findAll(cloneDeepUnref(filters))
+  }
+}

package/src/queryCache.ts

@@ -0,0 +1,21 @@
+import { QueryCache as QC } from '@tanstack/query-core'
+import type {
+  Query,
+  QueryFilters,
+  WithRequired,
+  DefaultError,
+} from '@tanstack/query-core'
+import type { MaybeRefDeep } from './types'
+import { cloneDeepUnref } from './utils'
+
+export class QueryCache extends QC {
+  find<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData>(
+    filters: MaybeRefDeep<WithRequired<QueryFilters, 'queryKey'>>,
+  ): Query<TQueryFnData, TError, TData> | undefined {
+    return super.find(cloneDeepUnref(filters))
+  }
+
+  findAll(filters: MaybeRefDeep<QueryFilters> = {}): Query[] {
+    return super.findAll(cloneDeepUnref(filters))
+  }
+}

package/src/queryClient.ts

@@ -0,0 +1,278 @@
+import { ref } from 'vue-demi'
+import { QueryClient as QC } from '@tanstack/query-core'
+import type {
+  QueryKey,
+  QueryClientConfig,
+  SetDataOptions,
+  ResetOptions,
+  CancelOptions,
+  InvalidateQueryFilters,
+  InvalidateOptions,
+  RefetchQueryFilters,
+  RefetchOptions,
+  FetchQueryOptions,
+  FetchInfiniteQueryOptions,
+  InfiniteData,
+  DefaultOptions,
+  QueryObserverOptions,
+  MutationKey,
+  MutationObserverOptions,
+  QueryFilters,
+  MutationFilters,
+  QueryState,
+  Updater,
+  DefaultError,
+} from '@tanstack/query-core'
+import type { MaybeRefDeep } from './types'
+import { cloneDeepUnref } from './utils'
+import { QueryCache } from './queryCache'
+import { MutationCache } from './mutationCache'
+
+export class QueryClient extends QC {
+  constructor(config: MaybeRefDeep<QueryClientConfig> = {}) {
+    const unreffedConfig = cloneDeepUnref(config)
+    const vueQueryConfig: QueryClientConfig = {
+      defaultOptions: unreffedConfig.defaultOptions,
+      queryCache: unreffedConfig.queryCache || new QueryCache(),
+      mutationCache: unreffedConfig.mutationCache || new MutationCache(),
+    }
+    super(vueQueryConfig)
+  }
+
+  isRestoring = ref(false)
+
+  isFetching(filters: MaybeRefDeep<QueryFilters> = {}): number {
+    return super.isFetching(cloneDeepUnref(filters))
+  }
+
+  isMutating(filters: MaybeRefDeep<MutationFilters> = {}): number {
+    return super.isMutating(cloneDeepUnref(filters))
+  }
+
+  getQueryData<TData = unknown>(
+    queryKey: MaybeRefDeep<QueryKey>,
+  ): TData | undefined {
+    return super.getQueryData(cloneDeepUnref(queryKey))
+  }
+
+  getQueriesData<TData = unknown>(
+    filters: MaybeRefDeep<QueryFilters>,
+  ): [QueryKey, TData | undefined][] {
+    return super.getQueriesData(cloneDeepUnref(filters))
+  }
+
+  setQueryData<TData>(
+    queryKey: MaybeRefDeep<QueryKey>,
+    updater: Updater<TData | undefined, TData | undefined>,
+    options: MaybeRefDeep<SetDataOptions> = {},
+  ): TData | undefined {
+    return super.setQueryData(
+      cloneDeepUnref(queryKey),
+      updater,
+      cloneDeepUnref(options),
+    )
+  }
+
+  setQueriesData<TData>(
+    filters: MaybeRefDeep<QueryFilters>,
+    updater: Updater<TData | undefined, TData | undefined>,
+    options: MaybeRefDeep<SetDataOptions> = {},
+  ): [QueryKey, TData | undefined][] {
+    return super.setQueriesData(
+      cloneDeepUnref(filters),
+      updater,
+      cloneDeepUnref(options),
+    )
+  }
+
+  getQueryState<TData = unknown, TError = DefaultError>(
+    queryKey: MaybeRefDeep<QueryKey>,
+  ): QueryState<TData, TError> | undefined {
+    return super.getQueryState(cloneDeepUnref(queryKey))
+  }
+
+  removeQueries(filters: MaybeRefDeep<QueryFilters> = {}): void {
+    return super.removeQueries(cloneDeepUnref(filters))
+  }
+
+  resetQueries(
+    filters: MaybeRefDeep<QueryFilters> = {},
+    options: MaybeRefDeep<ResetOptions> = {},
+  ): Promise<void> {
+    return super.resetQueries(cloneDeepUnref(filters), cloneDeepUnref(options))
+  }
+
+  cancelQueries(
+    filters: MaybeRefDeep<QueryFilters> = {},
+    options: MaybeRefDeep<CancelOptions> = {},
+  ): Promise<void> {
+    return super.cancelQueries(cloneDeepUnref(filters), cloneDeepUnref(options))
+  }
+
+  invalidateQueries(
+    filters: MaybeRefDeep<InvalidateQueryFilters> = {},
+    options: MaybeRefDeep<InvalidateOptions> = {},
+  ): Promise<void> {
+    return super.invalidateQueries(
+      cloneDeepUnref(filters),
+      cloneDeepUnref(options),
+    )
+  }
+
+  refetchQueries(
+    filters: MaybeRefDeep<RefetchQueryFilters> = {},
+    options: MaybeRefDeep<RefetchOptions> = {},
+  ): Promise<void> {
+    return super.refetchQueries(
+      cloneDeepUnref(filters),
+      cloneDeepUnref(options),
+    )
+  }
+
+  fetchQuery<
+    TQueryFnData,
+    TError = DefaultError,
+    TData = TQueryFnData,
+    TQueryKey extends QueryKey = QueryKey,
+  >(
+    options: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  ): Promise<TData>
+  fetchQuery<
+    TQueryFnData,
+    TError = DefaultError,
+    TData = TQueryFnData,
+    TQueryKey extends QueryKey = QueryKey,
+  >(
+    options: MaybeRefDeep<
+      FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>
+    >,
+  ): Promise<TData> {
+    return super.fetchQuery(cloneDeepUnref(options))
+  }
+
+  prefetchQuery<
+    TQueryFnData = unknown,
+    TError = DefaultError,
+    TData = TQueryFnData,
+    TQueryKey extends QueryKey = QueryKey,
+  >(
+    options: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  ): Promise<void>
+  prefetchQuery<
+    TQueryFnData = unknown,
+    TError = DefaultError,
+    TData = TQueryFnData,
+    TQueryKey extends QueryKey = QueryKey,
+  >(
+    options: MaybeRefDeep<
+      FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>
+    >,
+  ): Promise<void> {
+    return super.prefetchQuery(cloneDeepUnref(options))
+  }
+
+  fetchInfiniteQuery<
+    TQueryFnData = unknown,
+    TError = DefaultError,
+    TData = TQueryFnData,
+    TQueryKey extends QueryKey = QueryKey,
+    TPageParam = unknown,
+  >(
+    options: FetchInfiniteQueryOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryKey,
+      TPageParam
+    >,
+  ): Promise<InfiniteData<TData>>
+  fetchInfiniteQuery<
+    TQueryFnData,
+    TError = DefaultError,
+    TData = TQueryFnData,
+    TQueryKey extends QueryKey = QueryKey,
+    TPageParam = unknown,
+  >(
+    options: MaybeRefDeep<
+      FetchInfiniteQueryOptions<
+        TQueryFnData,
+        TError,
+        TData,
+        TQueryKey,
+        TPageParam
+      >
+    >,
+  ): Promise<InfiniteData<TData>> {
+    return super.fetchInfiniteQuery(cloneDeepUnref(options))
+  }
+
+  prefetchInfiniteQuery<
+    TQueryFnData = unknown,
+    TError = DefaultError,
+    TData = TQueryFnData,
+    TQueryKey extends QueryKey = QueryKey,
+    TPageParam = unknown,
+  >(
+    options: FetchInfiniteQueryOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryKey,
+      TPageParam
+    >,
+  ): Promise<void>
+  prefetchInfiniteQuery<
+    TQueryFnData,
+    TError = DefaultError,
+    TData = TQueryFnData,
+    TQueryKey extends QueryKey = QueryKey,
+    TPageParam = unknown,
+  >(
+    options: MaybeRefDeep<
+      FetchInfiniteQueryOptions<
+        TQueryFnData,
+        TError,
+        TData,
+        TQueryKey,
+        TPageParam
+      >
+    >,
+  ): Promise<void> {
+    return super.prefetchInfiniteQuery(cloneDeepUnref(options))
+  }
+
+  setDefaultOptions(options: MaybeRefDeep<DefaultOptions>): void {
+    super.setDefaultOptions(cloneDeepUnref(options))
+  }
+
+  setQueryDefaults(
+    queryKey: MaybeRefDeep<QueryKey>,
+    options: MaybeRefDeep<
+      Omit<QueryObserverOptions<unknown, any, any, any>, 'queryKey'>
+    >,
+  ): void {
+    super.setQueryDefaults(cloneDeepUnref(queryKey), cloneDeepUnref(options))
+  }
+
+  getQueryDefaults(
+    queryKey: MaybeRefDeep<QueryKey>,
+  ): QueryObserverOptions<any, any, any, any, any> {
+    return super.getQueryDefaults(cloneDeepUnref(queryKey))
+  }
+
+  setMutationDefaults(
+    mutationKey: MaybeRefDeep<MutationKey>,
+    options: MaybeRefDeep<MutationObserverOptions<any, any, any, any>>,
+  ): void {
+    super.setMutationDefaults(
+      cloneDeepUnref(mutationKey),
+      cloneDeepUnref(options),
+    )
+  }
+
+  getMutationDefaults(
+    mutationKey: MaybeRefDeep<MutationKey>,
+  ): MutationObserverOptions<any, any, any, any> {
+    return super.getMutationDefaults(cloneDeepUnref(mutationKey))
+  }
+}