Skip to content
Merged
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
2 changes: 1 addition & 1 deletion docs/reference/QueryClient.md
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,7 @@ This distinction is more a "convenience" for ts devs that know which structure w

## `queryClient.setQueryData`

`setQueryData` is a synchronous function that can be used to immediately update a query's cached data. If the query does not exist, it will be created. **If the query is not utilized by a query hook in the default `gcTime` of 5 minutes, the query will be garbage collected**. To update multiple queries at once and match query keys partially, you need to use [`queryClient.setQueriesData`](#queryclientsetqueriesdata) instead.
`setQueryData` is a synchronous function that can be used to immediately update a query's cached data. If the query does not exist, it will be created. **If the query is not utilized by a query hook within the default `gcTime`, the query will be garbage collected. If the default `gcTime` has not been configured, it defaults to 5 minutes.** To update multiple queries at once and match query keys partially, you need to use [`queryClient.setQueriesData`](#queryclientsetqueriesdata) instead.

> The difference between using `setQueryData` and `fetchQuery` is that `setQueryData` is sync and assumes that you already synchronously have the data available. If you need to fetch the data asynchronously, it's suggested that you either refetch the query key or use `fetchQuery` to handle the asynchronous fetch.

Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
import { TestBed } from '@angular/core/testing'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { Injector, provideZonelessChangeDetection } from '@angular/core'
import {
Component,
Injector,
provideZonelessChangeDetection,
} from '@angular/core'
import { render } from '@testing-library/angular'
import { queryKey, sleep } from '@tanstack/query-test-utils'
import { QueryClient, injectInfiniteQuery, provideTanStackQuery } from '..'
import { expectSignals } from './test-utils'

describe('injectInfiniteQuery', () => {
let queryClient: QueryClient
Expand All @@ -25,42 +29,41 @@ describe('injectInfiniteQuery', () => {

it('should properly execute infinite query', async () => {
const key = queryKey()
const query = TestBed.runInInjectionContext(() => {
return injectInfiniteQuery(() => ({

@Component({
template: `
<div>status: {{ query.status() }}</div>
<div>pages: {{ query.data()?.pages?.join(', ') ?? 'none' }}</div>
`,
})
class Page {
readonly query = injectInfiniteQuery(() => ({
queryKey: key,
queryFn: ({ pageParam }) =>
sleep(10).then(() => 'data on page ' + pageParam),
initialPageParam: 0,
getNextPageParam: () => 12,
}))
})
}

expectSignals(query, {
data: undefined,
status: 'pending',
})
const rendered = await render(Page)

await vi.advanceTimersByTimeAsync(11)
expect(rendered.getByText('status: pending')).toBeInTheDocument()
expect(rendered.getByText('pages: none')).toBeInTheDocument()

expectSignals(query, {
data: {
pageParams: [0],
pages: ['data on page 0'],
},
status: 'success',
})
await vi.advanceTimersByTimeAsync(11)
rendered.fixture.detectChanges()
expect(rendered.getByText('status: success')).toBeInTheDocument()
expect(rendered.getByText('pages: data on page 0')).toBeInTheDocument()

void query.fetchNextPage()
rendered.fixture.componentInstance.query.fetchNextPage()

await vi.advanceTimersByTimeAsync(11)

expectSignals(query, {
data: {
pageParams: [0, 12],
pages: ['data on page 0', 'data on page 12'],
},
status: 'success',
})
rendered.fixture.detectChanges()
expect(rendered.getByText('status: success')).toBeInTheDocument()
expect(
rendered.getByText('pages: data on page 0, data on page 12'),
).toBeInTheDocument()
})

describe('injection context', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import { TestBed } from '@angular/core/testing'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { Injector, provideZonelessChangeDetection } from '@angular/core'
import {
Component,
Injector,
provideZonelessChangeDetection,
} from '@angular/core'
import { render } from '@testing-library/angular'
import { queryKey, sleep } from '@tanstack/query-test-utils'
import {
QueryClient,
Expand Down Expand Up @@ -30,19 +35,29 @@ describe('injectIsFetching', () => {

it('should return the number of fetching queries', async () => {
const key = queryKey()
const isFetching = TestBed.runInInjectionContext(() => {
injectQuery(() => ({

@Component({
template: `<div>fetching: {{ isFetching() }}</div>`,
})
class Page {
readonly query = injectQuery(() => ({
queryKey: key,
queryFn: () => sleep(100).then(() => 'Some data'),
}))
return injectIsFetching()
})
readonly isFetching = injectIsFetching()
}

const rendered = await render(Page)

expect(rendered.getByText('fetching: 0')).toBeInTheDocument()

await vi.advanceTimersByTimeAsync(0)
rendered.fixture.detectChanges()
expect(rendered.getByText('fetching: 1')).toBeInTheDocument()

expect(isFetching()).toStrictEqual(0)
await vi.advanceTimersByTimeAsync(1)
expect(isFetching()).toStrictEqual(1)
await vi.advanceTimersByTimeAsync(100)
expect(isFetching()).toStrictEqual(0)
await vi.advanceTimersByTimeAsync(101)
rendered.fixture.detectChanges()
expect(rendered.getByText('fetching: 0')).toBeInTheDocument()
})

describe('injection context', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { TestBed } from '@angular/core/testing'
import { Injector, provideZonelessChangeDetection } from '@angular/core'
import {
Component,
Injector,
provideZonelessChangeDetection,
} from '@angular/core'
import { render } from '@testing-library/angular'
import { queryKey, sleep } from '@tanstack/query-test-utils'
import {
QueryClient,
Expand Down Expand Up @@ -30,25 +35,31 @@ describe('injectIsMutating', () => {

it('should properly return isMutating state', async () => {
const key = queryKey()
const [mutation, isMutating] = TestBed.runInInjectionContext(() => [
injectMutation(() => ({

@Component({
template: `<div>mutating: {{ isMutating() }}</div>`,
})
class Page {
readonly mutation = injectMutation(() => ({
mutationKey: key,
mutationFn: (params: { par1: string }) => sleep(10).then(() => params),
})),
injectIsMutating(),
])
}))
readonly isMutating = injectIsMutating()
}

expect(isMutating()).toBe(0)
const rendered = await render(Page)

mutation.mutate({
par1: 'par1',
})
expect(rendered.getByText('mutating: 0')).toBeInTheDocument()

rendered.fixture.componentInstance.mutation.mutate({ par1: 'par1' })

expect(isMutating()).toBe(0)
await vi.advanceTimersByTimeAsync(0)
expect(isMutating()).toBe(1)
rendered.fixture.detectChanges()
expect(rendered.getByText('mutating: 1')).toBeInTheDocument()

await vi.advanceTimersByTimeAsync(11)
expect(isMutating()).toBe(0)
rendered.fixture.detectChanges()
expect(rendered.getByText('mutating: 0')).toBeInTheDocument()
})

describe('injection context', () => {
Expand Down
Loading