feat(solid-query-persist-client): Solid.js implementation of client persistence (TanStack#5858)

* added solid-query-persist-client package

* isRestoring context

* convert persistence logic to solid

* modify tests for Solid

* modify test for increased reactivity

* fix Provider

* fix jest for Solid

* add isRestoring logic

* prettier + lint

* make fixes to pass tests

* change testing to vitest

* add isRestoring check

* update test

* fix staleTime test

* add unsubscribe condition

* formatting

* update createBaseQuery to refetch after hydration

* refetch on hydration

* formatting and build test fix

* T[] -> Array<T>

* changed useQueryClient to return a signal

* keep queryClient reactive, without breaking API

Author: aadito123

examples/react/nextjs-suspense-streaming/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

packages/query-devtools/vitest.config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
   test: {
-    name: 'solid-query',
+    name: 'query-devtools',
     dir: './src',
     watch: false,
     setupFiles: [],

packages/solid-query-persist-client/.eslintrc.cjs

@@ -0,0 +1,11 @@
+// @ts-check
+
+/** @type {import('eslint').Linter.Config} */
+const config = {
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.json',
+  },
+}
+
+module.exports = config

packages/solid-query-persist-client/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@tanstack/solid-query-persist-client",
+  "version": "5.0.0-beta.15",
+  "description": "Solid.js bindings to work with persisters in TanStack/solid-query",
+  "author": "tannerlinsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/query.git",
+    "directory": "packages/solid-query-persist-client"
+  },
+  "homepage": "https://tanstack.com/query",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "type": "module",
+  "types": "./build/index.d.ts",
+  "main": "./build/index.cjs",
+  "module": "./build/index.js",
+  "exports": {
+    "development": {
+      "import": {
+        "types": "./build/index.d.ts",
+        "default": "./build/dev.js"
+      },
+      "require": {
+        "types": "./build/index.d.cts",
+        "default": "./build/dev.cjs"
+      }
+    },
+    "import": {
+      "types": "./build/index.d.ts",
+      "default": "./build/index.js"
+    },
+    "require": {
+      "types": "./build/index.d.cts",
+      "default": "./build/index.cjs"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "build",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rimraf ./build && rimraf ./coverage",
+    "test:eslint": "eslint --ext .ts,.tsx ./src",
+    "test:types": "tsc",
+    "test:lib": "vitest run --coverage",
+    "test:lib:dev": "vitest watch --coverage",
+    "test:build": "publint --strict",
+    "build": "tsup"
+  },
+  "dependencies": {
+    "@tanstack/query-persist-client-core": "workspace:*"
+  },
+  "devDependencies": {
+    "tsup-preset-solid": "^2.0.1",
+    "vite-plugin-solid": "^2.7.0",
+    "solid-js": "^1.7.8"
+  },
+  "peerDependencies": {
+    "@tanstack/solid-query": "workspace:*",
+    "solid-js": "^1.6.0"
+  }
+}

packages/solid-query-persist-client/src/PersistQueryClientProvider.tsx

@@ -0,0 +1,52 @@
+import { persistQueryClient } from '@tanstack/query-persist-client-core'
+import { createComputed, createSignal, onCleanup } from 'solid-js'
+import { IsRestoringProvider, QueryClientProvider } from '@tanstack/solid-query'
+import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
+import type { QueryClientProviderProps } from '@tanstack/solid-query'
+import type { JSX } from 'solid-js'
+
+export type PersistQueryClientProviderProps = QueryClientProviderProps & {
+  persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>
+  onSuccess?: () => void
+}
+
+export const PersistQueryClientProvider = (
+  props: PersistQueryClientProviderProps,
+): JSX.Element => {
+  const [isRestoring, setIsRestoring] = createSignal(true)
+
+  let unsub: undefined | (() => void)
+  createComputed<() => void>((cleanup) => {
+    cleanup?.()
+    let isStale = false
+    setIsRestoring(true)
+    const [unsubscribe, promise] = persistQueryClient({
+      ...props.persistOptions,
+      queryClient: props.client,
+    })
+
+    promise.then(async () => {
+      if (isStale) return
+      try {
+        await props.onSuccess?.()
+      } finally {
+        setIsRestoring(false)
+      }
+    })
+
+    unsub = () => {
+      isStale = true
+      unsubscribe()
+    }
+    return unsub
+  })
+
+  onCleanup(() => unsub?.())
+  return (
+    <QueryClientProvider client={props.client}>
+      <IsRestoringProvider value={isRestoring}>
+        {props.children}
+      </IsRestoringProvider>
+    </QueryClientProvider>
+  )
+}