@tanstack/solid-query 5.0.0-alpha.85 → 5.0.0-alpha.87

package/src/__tests__/createQuery.test.tsx

@@ -22,7 +22,7 @@ import {
   Blink,
   createQueryClient,
   expectType,
-  mockNavigatorOnLine,
+  mockOnlineManagerIsOnline,
   mockVisibilityState,
   queryKey,
   setActTimeout,
@@ -2129,39 +2129,6 @@ describe('createQuery', () => {
     screen.getByText('status: pending')
   })
 
-  // See https://github.com/tannerlinsley/react-query/issues/147
-  it('should not pass stringified variables to query function', async () => {
-    const key = queryKey()
-    const variables = { number: 5, boolean: false, object: {}, array: [] }
-    type CustomQueryKey = readonly [typeof key, typeof variables]
-    const states: CreateQueryResult<CustomQueryKey, unknown>[] = []
-
-    function Page() {
-      const state = createQuery(() => ({
-        queryKey: [key, variables] as const,
-        queryFn: async (ctx) => {
-          await sleep(10)
-          return ctx.queryKey
-        },
-      }))
-
-      createRenderEffect(() => {
-        states.push({ ...state })
-      })
-      return null
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await sleep(20)
-
-    expect(states[1]?.data).toEqual([key, variables])
-  })
-
   it('should not refetch query on focus when `enabled` is set to `false`', async () => {
     const key = queryKey()
     const queryFn = vi.fn<unknown[], string>().mockReturnValue('data')
@@ -4999,7 +4966,7 @@ describe('createQuery', () => {
 
   describe('networkMode online', () => {
     it('online queries should not start fetching if you are offline', async () => {
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       const key = queryKey()
       const states: Array<any> = []
@@ -5033,9 +5000,11 @@ describe('createQuery', () => {
         </QueryClientProvider>
       ))
 
+      window.dispatchEvent(new Event('offline'))
+
       await waitFor(() => screen.getByText('status: pending, isPaused: true'))
 
-      onlineMock.mockReturnValue(true)
+      onlineMock.mockRestore()
       window.dispatchEvent(new Event('online'))
 
       await waitFor(() => screen.getByText('status: success, isPaused: false'))
@@ -5044,8 +5013,6 @@ describe('createQuery', () => {
       })
 
       expect(states).toEqual(['paused', 'fetching', 'idle'])
-
-      onlineMock.mockRestore()
     })
 
     it('online queries should not refetch if you are offline', async () => {
@@ -5087,7 +5054,8 @@ describe('createQuery', () => {
 
       await waitFor(() => screen.getByText('data: data1'))
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
+      window.dispatchEvent(new Event('offline'))
       fireEvent.click(screen.getByRole('button', { name: /invalidate/i }))
 
       await waitFor(() =>
@@ -5097,7 +5065,7 @@ describe('createQuery', () => {
       )
       await waitFor(() => screen.getByText('failureReason: null'))
 
-      onlineMock.mockReturnValue(true)
+      onlineMock.mockRestore()
       window.dispatchEvent(new Event('online'))
 
       await waitFor(() =>
@@ -5114,8 +5082,6 @@ describe('createQuery', () => {
       await waitFor(() => {
         expect(screen.getByText('data: data2')).toBeInTheDocument()
       })
-
-      onlineMock.mockRestore()
     })
 
     it('online queries should not refetch if you are offline and refocus', async () => {
@@ -5155,7 +5121,7 @@ describe('createQuery', () => {
 
       await waitFor(() => screen.getByText('data: data1'))
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
       fireEvent.click(screen.getByRole('button', { name: /invalidate/i }))
 
       await waitFor(() =>
@@ -5201,7 +5167,7 @@ describe('createQuery', () => {
         )
       }
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       render(() => (
         <QueryClientProvider client={queryClient}>
@@ -5256,7 +5222,7 @@ describe('createQuery', () => {
         )
       }
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       render(() => (
         <QueryClientProvider client={queryClient}>
@@ -5314,7 +5280,7 @@ describe('createQuery', () => {
         )
       }
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       render(() => (
         <QueryClientProvider client={queryClient}>
@@ -5322,6 +5288,8 @@ describe('createQuery', () => {
         </QueryClientProvider>
       ))
 
+      window.dispatchEvent(new Event('offline'))
+
       await waitFor(() =>
         screen.getByText('status: success, fetchStatus: paused'),
       )
@@ -5341,7 +5309,7 @@ describe('createQuery', () => {
       // triggers a second pause
       window.dispatchEvent(new Event('visibilitychange'))
 
-      onlineMock.mockReturnValue(true)
+      onlineMock.mockRestore()
       window.dispatchEvent(new Event('online'))
 
       await waitFor(() =>
@@ -5352,7 +5320,6 @@ describe('createQuery', () => {
       })
 
       expect(count).toBe(1)
-      onlineMock.mockRestore()
     })
 
     it('online queries should pause retries if you are offline', async () => {
@@ -5395,7 +5362,8 @@ describe('createQuery', () => {
       )
       await waitFor(() => screen.getByText('failureReason: failed1'))
 
-      const onlineMock = mockNavigatorOnLine(false)
+      window.dispatchEvent(new Event('offline'))
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       await sleep(20)
 
@@ -5408,7 +5376,7 @@ describe('createQuery', () => {
 
       expect(count).toBe(1)
 
-      onlineMock.mockReturnValue(true)
+      onlineMock.mockRestore()
       window.dispatchEvent(new Event('online'))
 
       await waitFor(() =>
@@ -5417,8 +5385,6 @@ describe('createQuery', () => {
       await waitFor(() => screen.getByText('failureReason: failed3'))
 
       expect(count).toBe(3)
-
-      onlineMock.mockRestore()
     })
 
     it('online queries should fetch if paused and we go online even if already unmounted (because not cancelled)', async () => {
@@ -5456,7 +5422,7 @@ describe('createQuery', () => {
         )
       }
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       render(() => (
         <QueryClientProvider client={queryClient}>
@@ -5464,13 +5430,15 @@ describe('createQuery', () => {
         </QueryClientProvider>
       ))
 
+      window.dispatchEvent(new Event('offline'))
+
       await waitFor(() =>
         screen.getByText('status: pending, fetchStatus: paused'),
       )
 
       fireEvent.click(screen.getByRole('button', { name: /hide/i }))
 
-      onlineMock.mockReturnValue(true)
+      onlineMock.mockRestore()
       window.dispatchEvent(new Event('online'))
 
       await sleep(15)
@@ -5481,8 +5449,6 @@ describe('createQuery', () => {
       })
 
       expect(count).toBe(1)
-
-      onlineMock.mockRestore()
     })
 
     it('online queries should not fetch if paused and we go online when cancelled and no refetchOnReconnect', async () => {
@@ -5515,7 +5481,7 @@ describe('createQuery', () => {
         )
       }
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       render(() => (
         <QueryClientProvider client={queryClient}>
@@ -5599,7 +5565,7 @@ describe('createQuery', () => {
         screen.getByText('status: success, fetchStatus: idle'),
       )
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       fireEvent.click(screen.getByRole('button', { name: /invalidate/i }))
 
@@ -5629,7 +5595,7 @@ describe('createQuery', () => {
 
   describe('networkMode always', () => {
     it('always queries should start fetching even if you are offline', async () => {
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       const key = queryKey()
       let count = 0
@@ -5671,7 +5637,7 @@ describe('createQuery', () => {
     })
 
     it('always queries should not pause retries', async () => {
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       const key = queryKey()
       let count = 0
@@ -5721,7 +5687,7 @@ describe('createQuery', () => {
 
   describe('networkMode offlineFirst', () => {
     it('offlineFirst queries should start fetching if you are offline, but pause retries', async () => {
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       const key = queryKey()
       let count = 0
@@ -5756,6 +5722,8 @@ describe('createQuery', () => {
         </QueryClientProvider>
       ))
 
+      window.dispatchEvent(new Event('offline'))
+
       await waitFor(() =>
         screen.getByText(
           'status: pending, fetchStatus: paused, failureCount: 1',
@@ -5765,7 +5733,7 @@ describe('createQuery', () => {
 
       expect(count).toBe(1)
 
-      onlineMock.mockReturnValue(true)
+      onlineMock.mockRestore()
       window.dispatchEvent(new Event('online'))
 
       await waitFor(() =>
@@ -5774,8 +5742,6 @@ describe('createQuery', () => {
       await waitFor(() => screen.getByText('failureReason: failed3'))
 
       expect(count).toBe(3)
-
-      onlineMock.mockRestore()
     })
   })
 

package/src/__tests__/utils.tsx

@@ -1,5 +1,6 @@
 import { Show, createEffect, createSignal, onCleanup } from 'solid-js'
 import { vi } from 'vitest'
+import { onlineManager } from '@tanstack/query-core'
 import { QueryClient } from '../QueryClient'
 import type { QueryClientConfig } from '@tanstack/query-core'
 import type { ParentProps } from 'solid-js'
@@ -41,8 +42,10 @@ export function mockVisibilityState(
   return vi.spyOn(document, 'visibilityState', 'get').mockReturnValue(value)
 }
 
-export function mockNavigatorOnLine(value: boolean): SpyInstance<[], boolean> {
-  return vi.spyOn(navigator, 'onLine', 'get').mockReturnValue(value)
+export function mockOnlineManagerIsOnline(
+  value: boolean,
+): SpyInstance<[], boolean> {
+  return vi.spyOn(onlineManager, 'isOnline').mockReturnValue(value)
 }
 
 export function sleep(timeout: number): Promise<void> {

package/dist/cjs/index.cjs

@@ -1,359 +0,0 @@
-'use strict';
-
-var queryCore = require('@tanstack/query-core');
-var solidJs = require('solid-js');
-var web = require('solid-js/web');
-var store = require('solid-js/store');
-
-queryCore.notifyManager.setBatchNotifyFunction(solidJs.batch);
-
-class QueryClient extends queryCore.QueryClient {
-  constructor(config = {}) {
-    super(config);
-  }
-}
-
-const QueryClientContext = solidJs.createContext(undefined);
-const useQueryClient = queryClient => {
-  if (queryClient) {
-    return queryClient;
-  }
-  const client = solidJs.useContext(QueryClientContext);
-  if (!client) {
-    throw new Error('No QueryClient set, use QueryClientProvider to set one');
-  }
-  return client;
-};
-const QueryClientProvider = props => {
-  solidJs.onMount(() => {
-    props.client.mount();
-  });
-  solidJs.onCleanup(() => props.client.unmount());
-  return web.createComponent(QueryClientContext.Provider, {
-    get value() {
-      return props.client;
-    },
-    get children() {
-      return props.children;
-    }
-  });
-};
-
-function shouldThrowError(throwError, params) {
-  // Allow throwError function to override throwing behavior on a per-error basis
-  if (typeof throwError === 'function') {
-    return throwError(...params);
-  }
-  return !!throwError;
-}
-
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
-// Had to disable the lint rule because isServer type is defined as false
-// in solid-js/web package. I'll create a GitHub issue with them to see
-// why that happens.
-function reconcileFn(store$1, result, reconcileOption) {
-  if (reconcileOption === false) return result;
-  if (typeof reconcileOption === 'function') {
-    const newData = reconcileOption(store$1.data, result.data);
-    return {
-      ...result,
-      data: newData
-    };
-  }
-  const newData = store.reconcile(result.data, {
-    key: reconcileOption
-  })(store$1.data);
-  return {
-    ...result,
-    data: newData
-  };
-}
-
-// Base Query Function that is used to create the query.
-function createBaseQuery(options, Observer, queryClient) {
-  const client = solidJs.createMemo(() => useQueryClient(queryClient?.()));
-  const defaultedOptions = client().defaultQueryOptions(options());
-  defaultedOptions._optimisticResults = 'optimistic';
-  defaultedOptions.structuralSharing = false;
-  if (web.isServer) {
-    defaultedOptions.retry = false;
-    defaultedOptions.throwOnError = true;
-  }
-  const observer = new Observer(client(), defaultedOptions);
-  const [state, setState] = store.createStore(observer.getOptimisticResult(defaultedOptions));
-  const createServerSubscriber = (resolve, reject) => {
-    return observer.subscribe(result => {
-      queryCore.notifyManager.batchCalls(() => {
-        const query = observer.getCurrentQuery();
-        const {
-          refetch,
-          ...rest
-        } = store.unwrap(result);
-        const unwrappedResult = {
-          ...rest,
-          // hydrate() expects a QueryState object, which is similar but not
-          // quite the same as a QueryObserverResult object. Thus, for now, we're
-          // copying over the missing properties from state in order to support hydration
-          dataUpdateCount: query.state.dataUpdateCount,
-          fetchFailureCount: query.state.fetchFailureCount,
-          // Removing these properties since they might not be serializable
-          // fetchFailureReason: query.state.fetchFailureReason,
-          // fetchMeta: query.state.fetchMeta,
-          isInvalidated: query.state.isInvalidated
-        };
-        if (unwrappedResult.isError) {
-          if (process.env['NODE_ENV'] === 'development') {
-            console.error(unwrappedResult.error);
-          }
-          reject(unwrappedResult.error);
-        }
-        if (unwrappedResult.isSuccess) {
-          // Use of any here is fine
-          // We cannot include refetch since it is not serializable
-          resolve(unwrappedResult);
-        }
-      })();
-    });
-  };
-  const createClientSubscriber = () => {
-    return observer.subscribe(result => {
-      queryCore.notifyManager.batchCalls(() => {
-        // @ts-expect-error - This will error because the reconcile option does not
-        // exist on the query-core QueryObserverResult type
-        const reconcileOptions = observer.options.reconcile;
-        // If the query has data we dont suspend but instead mutate the resource
-        // This could happen when placeholderData/initialData is defined
-        if (queryResource()?.data && result.data && !queryResource.loading) {
-          setState(store => {
-            return reconcileFn(store, result, reconcileOptions === undefined ? 'id' : reconcileOptions);
-          });
-          mutate(state);
-        } else {
-          setState(store => {
-            return reconcileFn(store, result, reconcileOptions === undefined ? 'id' : reconcileOptions);
-          });
-          refetch();
-        }
-      })();
-    });
-  };
-
-  /**
-   * Unsubscribe is set lazily, so that we can subscribe after hydration when needed.
-   */
-  let unsubscribe = null;
-  const [queryResource, {
-    refetch,
-    mutate
-  }] = solidJs.createResource(() => {
-    return new Promise((resolve, reject) => {
-      if (web.isServer) {
-        unsubscribe = createServerSubscriber(resolve, reject);
-      } else {
-        if (!unsubscribe) {
-          unsubscribe = createClientSubscriber();
-        }
-      }
-      if (!state.isLoading) {
-        resolve(state);
-      }
-    });
-  }, {
-    initialValue: state,
-    // If initialData is provided, we resolve the resource immediately
-    ssrLoadFrom: options().initialData ? 'initial' : 'server',
-    get deferStream() {
-      return options().deferStream;
-    },
-    /**
-     * If this resource was populated on the server (either sync render, or streamed in over time), onHydrated
-     * will be called. This is the point at which we can hydrate the query cache state, and setup the query subscriber.
-     *
-     * Leveraging onHydrated allows us to plug into the async and streaming support that solidjs resources already support.
-     *
-     * Note that this is only invoked on the client, for queries that were originally run on the server.
-     */
-    onHydrated(_k, info) {
-      if (info.value) {
-        queryCore.hydrate(client(), {
-          queries: [{
-            queryKey: defaultedOptions.queryKey,
-            queryHash: defaultedOptions.queryHash,
-            state: info.value
-          }]
-        });
-      }
-      if (!unsubscribe) {
-        /**
-         * Do not refetch query on mount if query was fetched on server,
-         * even if `staleTime` is not set.
-         */
-        const newOptions = {
-          ...defaultedOptions
-        };
-        if (defaultedOptions.staleTime || !defaultedOptions.initialData) {
-          newOptions.refetchOnMount = false;
-        }
-        // Setting the options as an immutable object to prevent
-        // wonky behavior with observer subscriptions
-        observer.setOptions(newOptions);
-        setState(observer.getOptimisticResult(newOptions));
-        unsubscribe = createClientSubscriber();
-      }
-    }
-  });
-  solidJs.onCleanup(() => {
-    if (unsubscribe) {
-      unsubscribe();
-      unsubscribe = null;
-    }
-  });
-  solidJs.createComputed(solidJs.on(() => client().defaultQueryOptions(options()), () => observer.setOptions(client().defaultQueryOptions(options())), {
-    // Defer because we don't need to trigger on first render
-    // This only cares about changes to options after the observer is created
-    defer: true
-  }));
-  solidJs.createComputed(solidJs.on(() => state.status, () => {
-    if (state.isError && !state.isFetching && shouldThrowError(observer.options.throwOnError, [state.error, observer.getCurrentQuery()])) {
-      throw state.error;
-    }
-  }));
-  const handler = {
-    get(target, prop) {
-      const val = queryResource()?.[prop];
-      return val !== undefined ? val : Reflect.get(target, prop);
-    }
-  };
-  return new Proxy(state, handler);
-}
-
-function queryOptions(options) {
-  return options;
-}
-function createQuery(options, queryClient) {
-  return createBaseQuery(solidJs.createMemo(() => options()), queryCore.QueryObserver, queryClient);
-}
-
-function useIsFetching(filters, queryClient) {
-  const client = solidJs.createMemo(() => useQueryClient(queryClient?.()));
-  const queryCache = solidJs.createMemo(() => client().getQueryCache());
-  const [fetches, setFetches] = solidJs.createSignal(client().isFetching(filters?.()));
-  const unsubscribe = queryCache().subscribe(() => {
-    setFetches(client().isFetching(filters?.()));
-  });
-  solidJs.onCleanup(unsubscribe);
-  return fetches;
-}
-
-function createInfiniteQuery(options, queryClient) {
-  return createBaseQuery(solidJs.createMemo(() => options()),
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-  queryCore.InfiniteQueryObserver, queryClient);
-}
-
-// HOOK
-function createMutation(options, queryClient) {
-  const client = useQueryClient(queryClient?.());
-  const observer = new queryCore.MutationObserver(client, options());
-  const mutate = (variables, mutateOptions) => {
-    observer.mutate(variables, mutateOptions).catch(noop);
-  };
-  const [state, setState] = store.createStore({
-    ...observer.getCurrentResult(),
-    mutate,
-    mutateAsync: observer.getCurrentResult().mutate
-  });
-  solidJs.createComputed(() => {
-    observer.setOptions(options());
-  });
-  solidJs.createComputed(solidJs.on(() => state.status, () => {
-    if (state.isError && shouldThrowError(observer.options.throwOnError, [state.error])) {
-      throw state.error;
-    }
-  }));
-  const unsubscribe = observer.subscribe(result => {
-    setState({
-      ...result,
-      mutate,
-      mutateAsync: result.mutate
-    });
-  });
-  solidJs.onCleanup(unsubscribe);
-  return state;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-function noop() {}
-
-function useIsMutating(filters, queryClient) {
-  const client = solidJs.createMemo(() => useQueryClient(queryClient?.()));
-  const mutationCache = solidJs.createMemo(() => client().getMutationCache());
-  const [mutations, setMutations] = solidJs.createSignal(client().isMutating(filters?.()));
-  const unsubscribe = mutationCache().subscribe(_result => {
-    setMutations(client().isMutating(filters?.()));
-  });
-  solidJs.onCleanup(unsubscribe);
-  return mutations;
-}
-
-// This defines the `UseQueryOptions` that are accepted in `QueriesOptions` & `GetOptions`.
-// `placeholderData` function does not have a parameter
-// Avoid TS depth-limit error in case of large array literal
-/**
- * QueriesOptions reducer recursively unwraps function arguments to infer/enforce type param
- */
-/**
- * QueriesResults reducer recursively maps type param to results
- */
-function createQueries(queriesOptions, queryClient) {
-  const client = useQueryClient(queryClient?.());
-  const defaultedQueries = queriesOptions().queries.map(options => {
-    const defaultedOptions = client.defaultQueryOptions(options);
-    defaultedOptions._optimisticResults = 'optimistic';
-    return defaultedOptions;
-  });
-  const observer = new queryCore.QueriesObserver(client, defaultedQueries, queriesOptions().combine ? {
-    combine: queriesOptions().combine
-  } : undefined);
-
-  // @ts-expect-error - Types issue with solid-js createStore
-  const [state, setState] = store.createStore(observer.getOptimisticResult(defaultedQueries)[1]());
-  const unsubscribe = observer.subscribe(result => {
-    queryCore.notifyManager.batchCalls(() => {
-      setState(store.unwrap(result));
-    })();
-  });
-  solidJs.onCleanup(unsubscribe);
-  solidJs.createComputed(() => {
-    const updatedQueries = queriesOptions().queries.map(options => {
-      const defaultedOptions = client.defaultQueryOptions(options);
-      defaultedOptions._optimisticResults = 'optimistic';
-      return defaultedOptions;
-    });
-    observer.setQueries(updatedQueries, queriesOptions().combine ? {
-      combine: queriesOptions().combine
-    } : undefined, {
-      listeners: false
-    });
-  });
-  return state;
-}
-
-exports.QueryClient = QueryClient;
-exports.QueryClientContext = QueryClientContext;
-exports.QueryClientProvider = QueryClientProvider;
-exports.createInfiniteQuery = createInfiniteQuery;
-exports.createMutation = createMutation;
-exports.createQueries = createQueries;
-exports.createQuery = createQuery;
-exports.queryOptions = queryOptions;
-exports.useIsFetching = useIsFetching;
-exports.useIsMutating = useIsMutating;
-exports.useQueryClient = useQueryClient;
-Object.keys(queryCore).forEach(function (k) {
-  if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
-    enumerable: true,
-    get: function () { return queryCore[k]; }
-  });
-});
-//# sourceMappingURL=index.cjs.map