chore(Core): upgrade query core (#69)

* chore(QueryCore): upgrade query core

* chore(QueryCore): fix TS, format

* chore(Version): upgrade version 1.6.0

* test(Timeout): ignore TS

* test(Timeout): ignore TS

* test(Stores): fix ts

package.json

@@ -2,7 +2,7 @@
   "name": "@sveltestack/svelte-query",
   "homepage": "https://github.com/SvelteStack/svelte-query",
   "private": false,
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Hooks for managing, caching and syncing asynchronous and remote data in Svelte",
   "license": "MIT",
   "svelte": "svelte/index.js",
@@ -82,7 +82,7 @@
     "svelte-jester": "^1.0.5",
     "svelte2tsx": "^0.4.8",
     "ts-jest": "^26.5.4",
-    "type-fest": "^0.21.1",
+    "type-fest": "^2.10.0",
     "typescript": "^4.0.3"
   },
   "peerDependencies": {

src/infiniteQuery/useInfiniteQuery.ts

@@ -23,7 +23,7 @@ export function useInfiniteQuery<
     TQueryKey extends QueryKey = QueryKey
 >(
     queryKey: TQueryKey,
-    options?: UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>
+    options?: Omit<UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>, 'queryKey'>
 ): UseInfiniteQueryStoreResult<TQueryFnData, TError, TData, TQueryKey>
 export function useInfiniteQuery<
     TQueryFnData = unknown,
@@ -33,7 +33,7 @@ export function useInfiniteQuery<
 >(
     queryKey: TQueryKey,
     queryFn: QueryFunction<TQueryFnData, TQueryKey>,
-    options?: UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>
+    options?: Omit<UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>, 'queryKey' | 'queryFn'>
 ): UseInfiniteQueryStoreResult<TQueryFnData, TError, TData, TQueryKey>
 export default function useInfiniteQuery<TQueryFnData, TError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
     arg1: TQueryKey | UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>,
@@ -78,7 +78,7 @@ export default function useInfiniteQuery<TQueryFnData, TError, TData = TQueryFnD
             let defaultedOptions = client.defaultQueryObserverOptions(options)
             // Include callbacks in batch renders
             defaultedOptions = setBatchCalls<UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>>(defaultedOptions)
-            observer.setOptions(defaultedOptions)
+            observer.setOptions(defaultedOptions, { listeners: false })
         }
     }
 

src/mutation/useMutation.ts

@@ -28,7 +28,7 @@ export function useMutation<
     TContext = unknown
 >(
     mutationFn: MutationFunction<TData, TVariables>,
-    options?: UseMutationOptions<TData, TError, TVariables, TContext>
+    options?: Omit<UseMutationOptions<TData, TError, TVariables, TContext>, 'mutationFn'>
 ): MutationStoreResult<TData, TError, TVariables, TContext>
 export function useMutation<
     TData = unknown,
@@ -37,7 +37,7 @@ export function useMutation<
     TContext = unknown
 >(
     mutationKey: MutationKey,
-    options?: UseMutationOptions<TData, TError, TVariables, TContext>
+    options?: Omit<UseMutationOptions<TData, TError, TVariables, TContext>, 'mutationKey'>
 ): MutationStoreResult<TData, TError, TVariables, TContext>
 export function useMutation<
     TData = unknown,
@@ -47,7 +47,7 @@ export function useMutation<
 >(
     mutationKey: MutationKey,
     mutationFn?: MutationFunction<TData, TVariables>,
-    options?: UseMutationOptions<TData, TError, TVariables, TContext>
+    options?: Omit<UseMutationOptions<TData, TError, TVariables, TContext>, 'mutationKey' | 'mutationFn'>
 ): MutationStoreResult<TData, TError, TVariables, TContext>
 export default function useMutation<
     TData = unknown,

src/queries/useQueries.ts

@@ -1,37 +1,37 @@
 import { readable } from 'svelte/store';
 
-import { notifyManager, QueriesObserver, QueryClient, QueryKey } from "../queryCore/core";
+import { notifyManager, QueriesObserver, QueryClient } from "../queryCore/core";
 import { useQueryClient } from "../queryClientProvider";
-import type { UseQueryOptions, UseQueriesStoreResult } from "../types";
-
-export default function useQueries<
-    TQueryFnData = unknown,
-    TError = unknown,
-    TData = TQueryFnData,
-    TQueryKey extends QueryKey = QueryKey
->(queries: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>[]): UseQueriesStoreResult<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>[]>;
-export default function useQueries<
-    TQueryFnData = unknown,
-    TError = unknown,
-    TData = TQueryFnData,
-    TQueryKey extends QueryKey = QueryKey
->(queries: []): UseQueriesStoreResult<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>[]>;
-export default function useQueries<
-    T extends readonly [...UseQueryOptions[]]
->(queries: T): UseQueriesStoreResult<T>;
-export default function useQueries<
-    T extends readonly [...UseQueryOptions[]]
->(queries: T): UseQueriesStoreResult<T> {
+import type { UseQueriesStoreResult, QueriesOptions, QueriesResults } from "../types";
+
+export default function useQueries<T extends any[]>(
+    queries: readonly [...QueriesOptions<T>]
+): UseQueriesStoreResult<T> {
     const client: QueryClient = useQueryClient();
-    const observer = new QueriesObserver(client, queries);
 
-    const { subscribe } = readable(observer.getCurrentResult(), (set) => {
+    function getDefaultQuery(newQueries: readonly [...QueriesOptions<T>]) {
+        return newQueries.map(options => {
+            const defaultedOptions = client.defaultQueryObserverOptions(
+                options
+            )
+            // Make sure the results are already in fetching state before subscribing or updating options
+            defaultedOptions.optimisticResults = true
+
+            return defaultedOptions
+        })
+    }
+
+    const defaultedQueries = getDefaultQuery(queries)
+    const observer = new QueriesObserver(client, defaultedQueries);
+
+    const { subscribe } = readable((observer.getCurrentResult() as QueriesResults<T>), (set) => {
         return observer.subscribe(notifyManager.batchCalls(set));
     });
 
-    const setQueries = (newQueries: T) => {
+    const setQueries = (newQueries: readonly [...QueriesOptions<T>]) => {
         if (observer.hasListeners()) {
-            observer.setQueries(newQueries)
+            const defaultedNewQueries = getDefaultQuery(newQueries)
+            observer.setQueries(defaultedNewQueries, { listeners: false })
         }
     }
 

src/query/useQuery.ts

@@ -19,7 +19,7 @@ export function useQuery<
     TError = unknown,
     TData = TQueryFnData,
     TQueryKey extends QueryKey = QueryKey
->(queryKey: TQueryKey, options?: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>): UseQueryStoreResult<TQueryFnData, TError, TData, TQueryKey>
+>(queryKey: TQueryKey, options?: Omit<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'queryKey'>): UseQueryStoreResult<TQueryFnData, TError, TData, TQueryKey>
 export function useQuery<
     TQueryFnData = unknown,
     TError = unknown,
@@ -28,7 +28,7 @@ export function useQuery<
 >(
     queryKey: TQueryKey,
     queryFn: QueryFunction<TQueryFnData, TQueryKey>,
-    options?: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>
+    options?: Omit<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'queryKey' | 'queryFn'>
 ): UseQueryStoreResult<TQueryFnData, TError, TData, TQueryKey>
 export default function useQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
     arg1: TQueryKey | UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
@@ -74,7 +74,7 @@ export default function useQuery<TQueryFnData = unknown, TError = unknown, TData
         // Include callbacks in batch renders
         defaultedOptions = setBatchCalls<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>>(defaultedOptions)
         if (observer.hasListeners()) {
-            observer.setOptions(defaultedOptions)
+            observer.setOptions(defaultedOptions, { listeners: false })
         }
     }
 

src/queryCore/broadcastQueryClient-experimental/index.ts

@@ -1,16 +1,15 @@
+import { BroadcastChannel } from 'broadcast-channel'
 import { QueryClient } from '../core'
 
 interface BroadcastQueryClientOptions {
   queryClient: QueryClient
-  broadcastChannel: string
+  broadcastChannel?: string
 }
 
-export async function broadcastQueryClient({
+export function broadcastQueryClient({
   queryClient,
   broadcastChannel = 'svelte-query',
 }: BroadcastQueryClientOptions) {
-  const { BroadcastChannel } = await import('broadcast-channel')
-
   let transaction = false
   const tx = (cb: () => void) => {
     transaction = true

src/queryCore/core/focusManager.ts

@@ -1,23 +1,51 @@
 import { Subscribable } from './subscribable'
 import { isServer } from './utils'
 
-class FocusManager extends Subscribable {
+type SetupFn = (
+  setFocused: (focused?: boolean) => void
+) => (() => void) | undefined
+
+export class FocusManager extends Subscribable {
   private focused?: boolean
-  private removeEventListener?: () => void
+  private cleanup?: () => void
+
+  private setup: SetupFn
+
+  constructor() {
+    super()
+    this.setup = onFocus => {
+      if (!isServer && window?.addEventListener) {
+        const listener = () => onFocus()
+        // Listen to visibillitychange and focus
+        window.addEventListener('visibilitychange', listener, false)
+        window.addEventListener('focus', listener, false)
+
+        return () => {
+          // Be sure to unsubscribe if a new handler is set
+          window.removeEventListener('visibilitychange', listener)
+          window.removeEventListener('focus', listener)
+        }
+      }
+    }
+  }
 
   protected onSubscribe(): void {
-    if (!this.removeEventListener) {
-      this.setDefaultEventListener()
+    if (!this.cleanup) {
+      this.setEventListener(this.setup)
     }
   }
 
-  setEventListener(
-    setup: (onFocus: () => void) => (focused?: boolean) => void
-  ): void {
-    if (this.removeEventListener) {
-      this.removeEventListener()
+  protected onUnsubscribe() {
+    if (!this.hasListeners()) {
+      this.cleanup?.()
+      this.cleanup = undefined
     }
-    this.removeEventListener = setup((focused?: boolean) => {
+  }
+
+  setEventListener(setup: SetupFn): void {
+    this.setup = setup
+    this.cleanup?.()
+    this.cleanup = setup(focused => {
       if (typeof focused === 'boolean') {
         this.setFocused(focused)
       } else {
@@ -54,22 +82,6 @@ class FocusManager extends Subscribable {
       document.visibilityState
     )
   }
-
-  private setDefaultEventListener() {
-    if (!isServer && window?.addEventListener) {
-      this.setEventListener(onFocus => {
-        // Listen to visibillitychange and focus
-        window.addEventListener('visibilitychange', onFocus, false)
-        window.addEventListener('focus', onFocus, false)
-
-        return () => {
-          // Be sure to unsubscribe if a new handler is set
-          window.removeEventListener('visibilitychange', onFocus)
-          window.removeEventListener('focus', onFocus)
-        }
-      })
-    }
-  }
 }
 
 export const focusManager = new FocusManager()

src/queryCore/hydration/hydration.ts → src/queryCore/core/hydration.ts

@@ -1,12 +1,12 @@
-import type { QueryClient } from '../core/queryClient'
-import type { Query, QueryState } from '../core/query'
+import type { QueryClient } from './queryClient'
+import type { Query, QueryState } from './query'
 import type {
   MutationKey,
   MutationOptions,
   QueryKey,
   QueryOptions,
-} from '../core/types'
-import type { Mutation, MutationState } from '../core/mutation'
+} from './types'
+import type { Mutation, MutationState } from './mutation'
 
 // TYPES
 

src/queryCore/core/index.ts

@@ -12,8 +12,17 @@ export { focusManager } from './focusManager'
 export { onlineManager } from './onlineManager'
 export { hashQueryKey, isError } from './utils'
 export { isCancelledError } from './retryer'
+export { dehydrate, hydrate } from './hydration'
 
 // Types
 export * from './types'
-export type { Query as QueryCore } from './query'
+export type { Query as QueryCore} from './query'
+export type { Mutation as MutationCore} from './mutation'
 export type { Logger } from './logger'
+export type {
+  DehydrateOptions,
+  DehydratedState,
+  HydrateOptions,
+  ShouldDehydrateMutationFunction,
+  ShouldDehydrateQueryFunction,
+} from './hydration'