@tanstack/solid-query 4.4.0

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@tanstack/solid-query",
+  "version": "4.4.0",
+  "description": "Primitives for managing, caching and syncing asynchronous and remote data in Solid",
+  "author": "tannerlinsley",
+  "license": "MIT",
+  "repository": "tanstack/query",
+  "homepage": "https://tanstack.com/query",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "types": "build/lib/index.d.ts",
+  "main": "build/lib/index.js",
+  "module": "build/lib/index.esm.js",
+  "exports": {
+    ".": {
+      "types": "./build/lib/index.d.ts",
+      "solid": "./build/solid/index.js",
+      "import": "./build/lib/index.mjs",
+      "browser": "./build/lib/index.mjs",
+      "require": "./build/lib/index.js",
+      "node": "./build/lib/index.js",
+      "default": "./build/lib/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rm -rf ./build",
+    "test:eslint": "../../node_modules/.bin/eslint --ext .ts,.tsx ./src",
+    "test:jest": "../../node_modules/.bin/jest --config jest.config.js",
+    "test:jest:dev": "yarn test:jest --watch"
+  },
+  "files": [
+    "build/lib/*",
+    "build/umd/*",
+    "build/solid/*",
+    "src"
+  ],
+  "devDependencies": {
+    "@types/jscodeshift": "^0.11.3",
+    "jscodeshift": "^0.13.1"
+  },
+  "dependencies": {
+    "@tanstack/query-core": "4.4.0"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.5.4"
+  },
+  "peerDependenciesMeta": {}
+}

package/src/QueryClientProvider.tsx

@@ -0,0 +1,100 @@
+import type { QueryClient } from '@tanstack/query-core'
+import type { Context, JSX } from 'solid-js'
+import {
+  createContext,
+  useContext,
+  onMount,
+  onCleanup,
+  mergeProps,
+} from 'solid-js'
+import type { ContextOptions } from './types'
+
+declare global {
+  interface Window {
+    SolidQueryClientContext?: Context<QueryClient | undefined>
+  }
+}
+
+export const defaultContext = createContext<QueryClient | undefined>(undefined)
+const QueryClientSharingContext = createContext<boolean>(false)
+
+// If we are given a context, we will use it.
+// Otherwise, if contextSharing is on, we share the first and at least one
+// instance of the context across the window
+// to ensure that if Solid Query is used across
+// different bundles or microfrontends they will
+// all use the same **instance** of context, regardless
+// of module scoping.
+function getQueryClientContext(
+  context: Context<QueryClient | undefined> | undefined,
+  contextSharing: boolean,
+) {
+  if (context) {
+    return context
+  }
+  if (contextSharing && typeof window !== 'undefined') {
+    if (!window.SolidQueryClientContext) {
+      window.SolidQueryClientContext = defaultContext
+    }
+
+    return window.SolidQueryClientContext
+  }
+
+  return defaultContext
+}
+
+export const useQueryClient = ({ context }: ContextOptions = {}) => {
+  const queryClient = useContext(
+    getQueryClientContext(context, useContext(QueryClientSharingContext)),
+  )
+
+  if (!queryClient) {
+    throw new Error('No QueryClient set, use QueryClientProvider to set one')
+  }
+
+  return queryClient
+}
+
+type QueryClientProviderPropsBase = {
+  client: QueryClient
+  children?: JSX.Element
+}
+type QueryClientProviderPropsWithContext = ContextOptions & {
+  contextSharing?: never
+} & QueryClientProviderPropsBase
+type QueryClientProviderPropsWithContextSharing = {
+  context?: never
+  contextSharing?: boolean
+} & QueryClientProviderPropsBase
+
+export type QueryClientProviderProps =
+  | QueryClientProviderPropsWithContext
+  | QueryClientProviderPropsWithContextSharing
+
+export const QueryClientProvider = (
+  props: QueryClientProviderProps,
+): JSX.Element => {
+  const mergedProps = mergeProps(
+    {
+      contextSharing: false,
+    },
+    props,
+  )
+  onMount(() => mergedProps.client.mount())
+  onCleanup(() => mergedProps.client.unmount())
+
+  const QueryClientContext = getQueryClientContext(
+    mergedProps.context,
+    mergedProps.contextSharing,
+  )
+
+  return (
+    <QueryClientSharingContext.Provider
+      value={!mergedProps.context && mergedProps.contextSharing}
+    >
+      <QueryClientContext.Provider value={mergedProps.client}>
+        {mergedProps.children}
+      </QueryClientContext.Provider>
+    </QueryClientSharingContext.Provider>
+  )
+}

package/src/__tests__/QueryClientProvider.test.tsx

@@ -0,0 +1,267 @@
+import { render, screen, waitFor } from 'solid-testing-library'
+import { queryKey } from './utils'
+
+import { QueryCache, QueryClient } from '@tanstack/query-core'
+import type { Context } from 'solid-js'
+import { createContext, useContext } from 'solid-js'
+import { renderToString } from 'solid-js/web'
+import { createQuery, QueryClientProvider, useQueryClient } from '..'
+import { createQueryClient, sleep } from './utils'
+
+describe('QueryClientProvider', () => {
+  it('sets a specific cache for all queries to use', async () => {
+    const key = queryKey()
+
+    const queryCache = new QueryCache()
+    const queryClient = createQueryClient({ queryCache })
+
+    function Page() {
+      const query = createQuery(key, async () => {
+        await sleep(10)
+        return 'test'
+      })
+
+      return (
+        <div>
+          <h1>{query.data}</h1>
+        </div>
+      )
+    }
+
+    render(() => (
+      <QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>
+    ))
+
+    await waitFor(() => {
+      return screen.getByText('test')
+    })
+
+    expect(queryCache.find(key())).toBeDefined()
+  })
+
+  it('allows multiple caches to be partitioned', async () => {
+    const key1 = queryKey()
+    const key2 = queryKey()
+
+    const queryCache1 = new QueryCache()
+    const queryCache2 = new QueryCache()
+
+    const queryClient1 = createQueryClient({ queryCache: queryCache1 })
+    const queryClient2 = createQueryClient({ queryCache: queryCache2 })
+
+    function Page1() {
+      const query = createQuery(key1, async () => {
+        await sleep(10)
+        return 'test1'
+      })
+
+      return (
+        <div>
+          <h1>{query.data}</h1>
+        </div>
+      )
+    }
+    function Page2() {
+      const query = createQuery(key2, async () => {
+        await sleep(10)
+        return 'test2'
+      })
+
+      return (
+        <div>
+          <h1>{query.data}</h1>
+        </div>
+      )
+    }
+
+    render(() => (
+      <>
+        <QueryClientProvider client={queryClient1}>
+          <Page1 />
+        </QueryClientProvider>
+        <QueryClientProvider client={queryClient2}>
+          <Page2 />
+        </QueryClientProvider>
+      </>
+    ))
+
+    await waitFor(() => screen.getByText('test1'))
+    await waitFor(() => screen.getByText('test2'))
+
+    expect(queryCache1.find(key1())).toBeDefined()
+    expect(queryCache1.find(key2())).not.toBeDefined()
+    expect(queryCache2.find(key1())).not.toBeDefined()
+    expect(queryCache2.find(key2())).toBeDefined()
+  })
+
+  it("uses defaultOptions for queries when they don't provide their own config", async () => {
+    const key = queryKey()
+
+    const queryCache = new QueryCache()
+    const queryClient = createQueryClient({
+      queryCache,
+      defaultOptions: {
+        queries: {
+          cacheTime: Infinity,
+        },
+      },
+    })
+
+    function Page() {
+      const query = createQuery(key, async () => {
+        await sleep(10)
+        return 'test'
+      })
+
+      return (
+        <div>
+          <h1>{query.data}</h1>
+        </div>
+      )
+    }
+
+    render(() => (
+      <QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>
+    ))
+
+    await waitFor(() => screen.getByText('test'))
+
+    expect(queryCache.find(key())).toBeDefined()
+    expect(queryCache.find(key())?.options.cacheTime).toBe(Infinity)
+  })
+
+  describe('with custom context', () => {
+    it('uses the correct context', async () => {
+      const key = queryKey()
+
+      const contextOuter = createContext<QueryClient | undefined>(undefined)
+      const contextInner = createContext<QueryClient | undefined>(undefined)
+
+      const queryCacheOuter = new QueryCache()
+      const queryClientOuter = new QueryClient({ queryCache: queryCacheOuter })
+
+      const queryCacheInner = new QueryCache()
+      const queryClientInner = new QueryClient({ queryCache: queryCacheInner })
+
+      const queryCacheInnerInner = new QueryCache()
+      const queryClientInnerInner = new QueryClient({
+        queryCache: queryCacheInnerInner,
+      })
+
+      function Page() {
+        const queryOuter = createQuery(key, async () => 'testOuter', {
+          context: contextOuter,
+        })
+        const queryInner = createQuery(key, async () => 'testInner', {
+          context: contextInner,
+        })
+        const queryInnerInner = createQuery(key, async () => 'testInnerInner')
+
+        return (
+          <div>
+            <h1>
+              {queryOuter.data} {queryInner.data} {queryInnerInner.data}
+            </h1>
+          </div>
+        )
+      }
+
+      // contextSharing should be ignored when passing a custom context.
+      const contextSharing = true
+
+      render(() => (
+        <QueryClientProvider client={queryClientOuter} context={contextOuter}>
+          <QueryClientProvider client={queryClientInner} context={contextInner}>
+            <QueryClientProvider
+              client={queryClientInnerInner}
+              contextSharing={contextSharing}
+            >
+              <Page />
+            </QueryClientProvider>
+          </QueryClientProvider>
+        </QueryClientProvider>
+      ))
+
+      await waitFor(() =>
+        screen.getByText('testOuter testInner testInnerInner'),
+      )
+    })
+  })
+
+  describe('useQueryClient', () => {
+    it('should throw an error if no query client has been set', () => {
+      const consoleMock = jest
+        .spyOn(console, 'error')
+        .mockImplementation(() => undefined)
+
+      function Page() {
+        useQueryClient()
+        return null
+      }
+
+      expect(() => render(() => <Page />)).toThrow(
+        'No QueryClient set, use QueryClientProvider to set one',
+      )
+
+      consoleMock.mockRestore()
+    })
+
+    it('should use window to get the context when contextSharing is true', () => {
+      const queryCache = new QueryCache()
+      const queryClient = createQueryClient({ queryCache })
+
+      let queryClientFromHook: QueryClient | undefined
+      let queryClientFromWindow: QueryClient | undefined
+
+      function Page() {
+        queryClientFromHook = useQueryClient()
+        queryClientFromWindow = useContext(
+          window.SolidQueryClientContext as Context<QueryClient | undefined>,
+        )
+        return null
+      }
+
+      render(() => (
+        <QueryClientProvider client={queryClient} contextSharing={true}>
+          <Page />
+        </QueryClientProvider>
+      ))
+
+      expect(queryClientFromHook).toEqual(queryClient)
+      expect(queryClientFromWindow).toEqual(queryClient)
+    })
+
+    it.skip('should not use window to get the context when contextSharing is true and window does not exist', () => {
+      const queryCache = new QueryCache()
+      const queryClient = createQueryClient({ queryCache })
+
+      // Mock a non web browser environment
+      const windowSpy = jest
+        .spyOn(window, 'window', 'get')
+        .mockImplementation(undefined)
+
+      let queryClientFromHook: QueryClient | undefined
+
+      function Page() {
+        queryClientFromHook = useQueryClient()
+        return null
+      }
+
+      // TODO(lukemurray): fails because renderToString never calls Page
+      // probably an SSR-testing issue we need to fix.
+      renderToString(() => (
+        <QueryClientProvider client={queryClient} contextSharing={true}>
+          <Page />
+        </QueryClientProvider>
+      ))
+
+      expect(queryClientFromHook).toEqual(queryClient)
+
+      windowSpy.mockRestore()
+    })
+  })
+})