Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(experimental_createQueryPersister): return more utilities, rename persister #8062

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 12 additions & 10 deletions docs/framework/react/plugins/createPersister.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
id: createPersister
title: experimental_createPersister
title: experimental_createQueryPersister
---

## Installation
Expand Down Expand Up @@ -33,8 +33,8 @@ bun add @tanstack/query-persist-client-core

## Usage

- Import the `experimental_createPersister` function
- Create a new `experimental_createPersister`
- Import the `experimental_createQueryPersister` function
- Create a new `experimental_createQueryPersister`
- you can pass any `storage` to it that adheres to the `AsyncStorage` or `Storage` interface - the example below uses the async-storage from React Native.
- Pass that `persister` as an option to your Query. This can be done either by passing it to the `defaultOptions` of the `QueryClient` or to any `useQuery` hook instance.
- If you pass this `persister` as `defaultOptions`, all queries will be persisted to the provided `storage`. You can additionally narrow this down by passing `filters`. In contrast to the `persistClient` plugin, this will not persist the whole query client as a single item, but each query separately. As a key, the query hash is used.
Expand All @@ -47,16 +47,18 @@ Garbage collecting a Query from memory **does not** affect the persisted data. T
```tsx
import AsyncStorage from '@react-native-async-storage/async-storage'
import { QueryClient } from '@tanstack/react-query'
import { experimental_createPersister } from '@tanstack/query-persist-client-core'
import { experimental_createQueryPersister } from '@tanstack/query-persist-client-core'

const persister = experimental_createQueryPersister({
storage: AsyncStorage,
maxAge: 1000 * 60 * 60 * 12, // 12 hours
})

const queryClient = new QueryClient({
defaultOptions: {
queries: {
gcTime: 1000 * 30, // 30 seconds
persister: experimental_createPersister({
storage: AsyncStorage,
maxAge: 1000 * 60 * 60 * 12, // 12 hours
}),
persister: persister.persisterFn,
},
},
})
Expand All @@ -68,10 +70,10 @@ The `createPersister` plugin technically wraps the `queryFn`, so it doesn't rest

## API

### `experimental_createPersister`
### `experimental_createQueryPersister`

```tsx
experimental_createPersister(options: StoragePersisterOptions)
experimental_createQueryPersister(options: StoragePersisterOptions)
```

#### `Options`
Expand Down
22 changes: 12 additions & 10 deletions docs/framework/vue/plugins/createPersister.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
id: createPersister
title: experimental_createPersister
title: experimental_createQueryPersister
---

## Installation
Expand Down Expand Up @@ -31,8 +31,8 @@ bun add @tanstack/query-persist-client-core

## Usage

- Import the `experimental_createPersister` function
- Create a new `experimental_createPersister`
- Import the `experimental_createQueryPersister` function
- Create a new `experimental_createQueryPersister`
- you can pass any `storage` to it that adheres to the `AsyncStorage` or `Storage` interface
- Pass that `persister` as an option to your Query. This can be done either by passing it to the `defaultOptions` of the `QueryClient` or to any `useQuery` hook instance.
- If you pass this `persister` as `defaultOptions`, all queries will be persisted to the provided `storage`. You can additionally narrow this down by passing `filters`. In contrast to the `persistClient` plugin, this will not persist the whole query client as a single item, but each query separately. As a key, the query hash is used.
Expand All @@ -44,16 +44,18 @@ Garbage collecting a Query from memory **does not** affect the persisted data. T

```tsx
import { QueryClient } from '@tanstack/vue-query'
import { experimental_createPersister } from '@tanstack/query-persist-client-core'
import { experimental_createQueryPersister } from '@tanstack/query-persist-client-core'

const persister = experimental_createQueryPersister({
storage: AsyncStorage,
maxAge: 1000 * 60 * 60 * 12, // 12 hours
})

const queryClient = new QueryClient({
defaultOptions: {
queries: {
gcTime: 1000 * 30, // 30 seconds
persister: experimental_createPersister({
storage: localStorage,
maxAge: 1000 * 60 * 60 * 12, // 12 hours
}),
persister: persister.persisterFn,
},
},
})
Expand All @@ -65,10 +67,10 @@ The `createPersister` plugin technically wraps the `queryFn`, so it doesn't rest

## API

### `experimental_createPersister`
### `experimental_createQueryPersister`

```tsx
experimental_createPersister(options: StoragePersisterOptions)
experimental_createQueryPersister(options: StoragePersisterOptions)
```

#### `Options`
Expand Down
6 changes: 3 additions & 3 deletions examples/vue/persister/src/Post.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { defineComponent } from 'vue'
import { useQuery } from '@tanstack/vue-query'

import { Post } from './types'
import { experimental_createPersister } from '@tanstack/query-persist-client-core'
import { experimental_createQueryPersister } from '@tanstack/query-persist-client-core'

const fetcher = async (id: number): Promise<Post> =>
await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then(
Expand All @@ -24,13 +24,13 @@ export default defineComponent({
const { isPending, isError, isFetching, data, error } = useQuery({
queryKey: ['post', props.postId] as const,
queryFn: () => fetcher(props.postId),
persister: experimental_createPersister({
persister: experimental_createQueryPersister({
storage: {
getItem: (key: string) => get(key),
setItem: (key: string, value: string) => set(key, value),
removeItem: (key: string) => del(key),
},
}),
}).persisterFn,
})

return { isPending, isError, isFetching, data, error }
Expand Down
6 changes: 3 additions & 3 deletions examples/vue/persister/src/Posts.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script lang="ts">
import { defineComponent } from 'vue'
import { useQuery } from '@tanstack/vue-query'
import { experimental_createPersister } from '@tanstack/query-persist-client-core'
import { experimental_createQueryPersister } from '@tanstack/query-persist-client-core'

import { Post } from './types'

Expand Down Expand Up @@ -34,9 +34,9 @@ export default defineComponent({
} = useQuery({
queryKey: ['posts'] as const,
queryFn: () => fetcher(),
persister: experimental_createPersister({
persister: experimental_createQueryPersister({
storage: localStorage,
}),
}).persisterFn,
staleTime: 5000,
})

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { describe, expect, test, vi } from 'vitest'
import { Query, QueryCache, hashKey } from '@tanstack/query-core'
import {
PERSISTER_KEY_PREFIX,
experimental_createPersister,
experimental_createQueryPersister,
} from '../createPersister'
import { sleep } from './utils'
import type { StoragePersisterOptions } from '../createPersister'
Expand All @@ -12,10 +12,10 @@ function getFreshStorage() {
const storage = new Map()
return {
getItem: (key: string) => Promise.resolve(storage.get(key)),
setItem: async (key: string, value: unknown) => {
setItem: (key: string, value: unknown) => {
storage.set(key, value)
},
removeItem: async (key: string) => {
removeItem: (key: string) => {
storage.delete(key)
},
}
Expand All @@ -36,7 +36,7 @@ function setupPersister(

const queryFn = vi.fn()

const persisterFn = experimental_createPersister(persisterOptions)
const { persisterFn } = experimental_createQueryPersister(persisterOptions)

const query = new Query({
cache: new QueryCache(),
Expand Down Expand Up @@ -202,7 +202,7 @@ describe('createPersister', () => {
storageKey,
JSON.stringify({
buster: '',
state: { dataUpdatedAt },
state: { dataUpdatedAt, data: '' },
}),
)

Expand Down Expand Up @@ -231,7 +231,7 @@ describe('createPersister', () => {
storageKey,
JSON.stringify({
buster: '',
state: { dataUpdatedAt: Date.now() },
state: { dataUpdatedAt: Date.now(), data: '' },
}),
)

Expand Down Expand Up @@ -325,7 +325,7 @@ describe('createPersister', () => {
storageKey,
JSON.stringify({
buster: '',
state: { dataUpdatedAt: Date.now() },
state: { dataUpdatedAt: Date.now(), data: '' },
}),
)

Expand Down
Loading
Loading