diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json deleted file mode 100644 index 75bde4e176..0000000000 --- a/.codesandbox/ci.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "installCommand": "install:csb", - "buildCommand": "build:csb", - "sandboxes": [ - "/examples/angular/basic", - "/examples/react/basic-typescript", - "/examples/solid/basic-typescript", - "/examples/svelte/basic", - "/examples/vue/basic" - ], - "packages": ["packages/**"], - "node": "18" -} diff --git a/.eslintrc.cjs b/.eslintrc.cjs deleted file mode 100644 index e9bfccb9d0..0000000000 --- a/.eslintrc.cjs +++ /dev/null @@ -1,142 +0,0 @@ -// @ts-check - -/** @type {import('eslint').Linter.Config} */ -const config = { - root: true, - reportUnusedDisableDirectives: true, - ignorePatterns: ['**/build', '**/coverage', '**/dist'], - parser: '@typescript-eslint/parser', - plugins: ['@typescript-eslint', 'import'], - extends: [ - 'eslint:recommended', - 'plugin:@cspell/recommended', - 'plugin:@typescript-eslint/recommended', - 'plugin:@typescript-eslint/stylistic', - 'plugin:import/recommended', - 'plugin:import/typescript', - 'prettier', - ], - env: { - browser: true, - es2020: true, - }, - parserOptions: { - tsconfigRootDir: __dirname, - project: true, - sourceType: 'module', - ecmaVersion: 2020, - }, - settings: { - 'import/parsers': { - '@typescript-eslint/parser': ['.ts', '.tsx'], - }, - 'import/resolver': { - typescript: true, - }, - react: { - version: 'detect', - }, - }, - rules: { - '@cspell/spellchecker': [ - 'error', - { - cspell: { - words: [ - 'tanstack', // Our package scope - 'tsqd', // Our public interface (TanStack Query Devtools shorthand) - 'retryer', // Our public interface - 'Promisable', // Our public interface - 'extralight', // Our public interface - 'codemod', // We support our codemod - 'typecheck', // Field of vite.config.ts - 'TSES', // @typescript-eslint package's interface - 'tsup', // We use tsup as builder - 'solidjs', // Our target framework - 'tabular-nums', // https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric - 'todos', // Too general word to be caught as error - 'vue-demi', // dependency of @tanstack/vue-query - ], - }, - }, - ], - '@typescript-eslint/array-type': [ - 'error', - { default: 'generic', readonly: 'generic' }, - ], - '@typescript-eslint/ban-types': 'off', - '@typescript-eslint/ban-ts-comment': 'off', - '@typescript-eslint/consistent-type-definitions': 'off', - '@typescript-eslint/consistent-type-imports': [ - 'error', - { prefer: 'type-imports' }, - ], - '@typescript-eslint/explicit-module-boundary-types': 'off', - '@typescript-eslint/method-signature-style': ['error', 'property'], - '@typescript-eslint/naming-convention': [ - 'error', - { - selector: 'typeParameter', - format: ['PascalCase'], - leadingUnderscore: 'forbid', - trailingUnderscore: 'forbid', - custom: { - regex: '^(T|T[A-Z][A-Za-z]+)$', - match: true, - }, - }, - ], - '@typescript-eslint/no-empty-function': 'off', - '@typescript-eslint/no-empty-interface': 'off', - '@typescript-eslint/no-explicit-any': 'off', - '@typescript-eslint/no-non-null-assertion': 'off', - '@typescript-eslint/no-unnecessary-condition': 'error', - '@typescript-eslint/no-unnecessary-type-assertion': 'error', - '@typescript-eslint/no-unused-vars': 'off', - '@typescript-eslint/no-inferrable-types': [ - 'error', - { ignoreParameters: true }, - ], - 'import/default': 'off', - 'import/export': 'off', - 'import/namespace': 'off', - 'import/newline-after-import': 'error', - 'import/no-cycle': 'error', - 'import/no-duplicates': 'off', - 'import/no-named-as-default-member': 'off', - 'import/no-unresolved': ['error', { ignore: ['^@tanstack/'] }], - 'import/no-unused-modules': ['off', { unusedExports: true }], - 'import/order': [ - 'error', - { - groups: [ - 'builtin', - 'external', - 'internal', - 'parent', - 'sibling', - 'index', - 'object', - 'type', - ], - }, - ], - 'no-case-declarations': 'off', - 'no-empty': 'off', - 'no-prototype-builtins': 'off', - 'no-redeclare': 'off', - 'no-shadow': 'error', - 'no-undef': 'off', - 'sort-imports': ['error', { ignoreDeclarationSort: true }], - }, - overrides: [ - { - files: ['**/*.test.{ts,tsx}'], - rules: { - '@typescript-eslint/no-unnecessary-condition': 'off', - }, - }, - ], -} - -module.exports = config diff --git a/.github/workflows/autofix.yml b/.github/workflows/autofix.yml new file mode 100644 index 0000000000..dc82d4c2a1 --- /dev/null +++ b/.github/workflows/autofix.yml @@ -0,0 +1,29 @@ +name: autofix.ci # needed to securely identify the workflow + +on: + pull_request: + push: + branches: [main, alpha, beta, rc, v4] + +concurrency: + group: ${{ github.workflow }}-${{ github.event.number || github.ref }} + cancel-in-progress: true + +permissions: + contents: read + +jobs: + autofix: + name: autofix + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Setup Tools + uses: tanstack/config/.github/setup@629cd3152485cbe985f5a7e66d370c858132c517 + - name: Fix formatting + run: pnpm prettier:write + - name: Apply fixes + uses: autofix-ci/action@dd55f44df8f7cdb7a6bf74c78677eb8acd40cd0a + with: + commit-message: 'ci: apply automated fixes' diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 5b7aab9faa..02f696bdb6 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -7,7 +7,7 @@ on: description: override release tag required: false push: - branches: ['main', 'alpha', 'beta', 'rc', 'v4'] + branches: [main, alpha, beta, rc, v4] concurrency: group: ${{ github.workflow }}-${{ github.event.number || github.ref }} @@ -16,6 +16,10 @@ concurrency: env: NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }} +permissions: + contents: write + id-token: write + jobs: test-and-publish: name: Test & Publish @@ -25,18 +29,11 @@ jobs: - name: Checkout uses: actions/checkout@v4 with: - fetch-depth: '0' - - name: Setup pnpm - uses: pnpm/action-setup@v4 - - name: Setup Node - uses: actions/setup-node@v4 - with: - node-version-file: .nvmrc - cache: pnpm + fetch-depth: 0 - name: Start Nx Agents run: npx nx-cloud start-ci-run --distribute-on=".nx/workflows/dynamic-changesets.yaml" - - name: Install dependencies - run: pnpm install --frozen-lockfile --prefer-offline + - name: Setup Tools + uses: tanstack/config/.github/setup@629cd3152485cbe985f5a7e66d370c858132c517 - name: Run Tests run: pnpm run test:ci --parallel=3 - name: Stop Nx Agents @@ -49,12 +46,12 @@ jobs: npm config set '//registry.npmjs.org/:_authToken' "${NPM_TOKEN}" pnpm run cipublish env: - GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} - GH_TOKEN: ${{ secrets.GH_TOKEN }} + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} NPM_TOKEN: ${{ secrets.NPM_TOKEN }} - NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} TAG: ${{ inputs.tag }} - name: Upload coverage to Codecov uses: codecov/codecov-action@v4 + with: + directory: packages env: CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }} diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index 314d9a84b1..65bc5d5f2a 100644 --- a/.github/workflows/pr.yml +++ b/.github/workflows/pr.yml @@ -12,36 +12,48 @@ concurrency: env: NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }} +permissions: + contents: read + jobs: - main: - name: Nx Cloud - Main Job + test: + name: Test runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 with: fetch-depth: 0 - - name: Setup pnpm - uses: pnpm/action-setup@v4 - - name: Setup Node - uses: actions/setup-node@v4 - with: - node-version-file: .nvmrc - cache: pnpm - name: Start Nx Agents run: npx nx-cloud start-ci-run --distribute-on=".nx/workflows/dynamic-changesets.yaml" - - name: Install dependencies - run: pnpm install --frozen-lockfile --prefer-offline + - name: Setup Tools + uses: tanstack/config/.github/setup@629cd3152485cbe985f5a7e66d370c858132c517 - name: Get base and head commits for `nx affected` - uses: nrwl/nx-set-shas@v3 + uses: nrwl/nx-set-shas@v4 with: - main-branch-name: 'main' - - name: Run Tests + main-branch-name: main + - name: Run Checks run: pnpm run test:pr --parallel=3 - name: Stop Nx Agents if: ${{ always() }} run: npx nx-cloud stop-all-agents - name: Upload coverage to Codecov uses: codecov/codecov-action@v4 + with: + directory: packages env: CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }} + preview: + name: Preview + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + with: + fetch-depth: 0 + - name: Setup Tools + uses: tanstack/config/.github/setup@629cd3152485cbe985f5a7e66d370c858132c517 + - name: Build Packages + run: pnpm run build:all + - name: Publish Previews + run: pnpx pkg-pr-new publish --pnpm --compact './packages/*' --template './examples/*/*' diff --git a/.gitignore b/.gitignore index 5c90883e87..9ad1f8224b 100644 --- a/.gitignore +++ b/.gitignore @@ -36,6 +36,7 @@ stats.html .cache .idea .nx/cache +.nx/workspace-data .pnpm-store .svelte-kit .tsup diff --git a/.husky/pre-commit b/.husky/pre-commit deleted file mode 100755 index cb2c84d5c3..0000000000 --- a/.husky/pre-commit +++ /dev/null @@ -1 +0,0 @@ -pnpm lint-staged diff --git a/.lintstagedrc b/.lintstagedrc deleted file mode 100644 index 0111deae6a..0000000000 --- a/.lintstagedrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "*": ["prettier --write"] -} diff --git a/.npmrc b/.npmrc index 6c2b9be4c4..84aee8d998 100644 --- a/.npmrc +++ b/.npmrc @@ -1,2 +1,3 @@ link-workspace-packages=true prefer-workspace-packages=true +provenance=true diff --git a/.nvmrc b/.nvmrc index 7bceec795e..58a1f0907f 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v22.2.0 +22.4.0 diff --git a/.nx/workflows/dynamic-changesets.yaml b/.nx/workflows/dynamic-changesets.yaml index 29c58231b2..d3536f3ba7 100644 --- a/.nx/workflows/dynamic-changesets.yaml +++ b/.nx/workflows/dynamic-changesets.yaml @@ -1,4 +1,4 @@ distribute-on: - small-changeset: 8 linux-medium-js - medium-changeset: 10 linux-medium-js - large-changeset: 12 linux-medium-js + small-changeset: 3 linux-medium-js + medium-changeset: 6 linux-medium-js + large-changeset: 10 linux-medium-js diff --git a/.pnpmfile.cjs b/.pnpmfile.cjs new file mode 100644 index 0000000000..1bc0c19d30 --- /dev/null +++ b/.pnpmfile.cjs @@ -0,0 +1,42 @@ +function readPackage(pkg, context) { + // react-scripts@4.0.3 + if (pkg.name === 'react-scripts' && pkg.version === '4.0.3') { + delete pkg.dependencies['@typescript-eslint/eslint-plugin'] + delete pkg.dependencies['@typescript-eslint/parser'] + delete pkg.dependencies['babel-eslint'] + delete pkg.dependencies['babel-jest'] + delete pkg.dependencies['eslint'] + delete pkg.dependencies['eslint-config-react-app'] + delete pkg.dependencies['eslint-plugin-flowtype'] + delete pkg.dependencies['eslint-plugin-import'] + delete pkg.dependencies['eslint-plugin-jest'] + delete pkg.dependencies['eslint-plugin-jsx-a11y'] + delete pkg.dependencies['eslint-plugin-react'] + delete pkg.dependencies['eslint-plugin-react-hooks'] + delete pkg.dependencies['eslint-plugin-testing-library'] + delete pkg.dependencies['jest'] + delete pkg.dependencies['jest-circus'] + delete pkg.dependencies['jest-resolve'] + delete pkg.dependencies['jest-watch-typeahead'] + context.log('Removed unused dependencies from react-scripts@4.0.3') + } + + // react-scripts@5.0.1 + if (pkg.name === 'react-scripts' && pkg.version === '5.0.1') { + delete pkg.dependencies['babel-jest'] + delete pkg.dependencies['eslint'] + delete pkg.dependencies['eslint-config-react-app'] + delete pkg.dependencies['jest'] + delete pkg.dependencies['jest-resolve'] + delete pkg.dependencies['jest-watch-typeahead'] + context.log('Removed unused dependencies from react-scripts@5.0.1') + } + + return pkg +} + +module.exports = { + hooks: { + readPackage, + }, +} diff --git a/.prettierignore b/.prettierignore index 0d948ff1e5..928bbaada5 100644 --- a/.prettierignore +++ b/.prettierignore @@ -8,3 +8,6 @@ pnpm-lock.yaml packages/**/tsup.config.bundled*.mjs **/tsconfig.vitest-temp.json + +# API Extractor report +packages/angular-query-experimental/etc/*.md diff --git a/docs/config.json b/docs/config.json index 74e1167323..2bf9b064b6 100644 --- a/docs/config.json +++ b/docs/config.json @@ -144,6 +144,10 @@ { "label": "Devtools", "to": "framework/angular/devtools" + }, + { + "label": "Zoneless", + "to": "framework/angular/zoneless" } ] } @@ -654,6 +658,14 @@ "label": "infiniteQueryOptions", "to": "framework/react/reference/infiniteQueryOptions" }, + { + "label": "usePrefetchQuery", + "to": "framework/react/reference/usePrefetchQuery" + }, + { + "label": "usePrefetchInfiniteQuery", + "to": "framework/react/reference/usePrefetchInfiniteQuery" + }, { "label": "QueryErrorResetBoundary", "to": "framework/react/reference/QueryErrorResetBoundary" @@ -725,6 +737,32 @@ "to": "framework/solid/reference/createQuery" } ] + }, + { + "label": "svelte", + "children": [ + { + "label": "Svelte Reference", + "to": "framework/svelte/reference/index" + }, + { + "label": "Functions / createQuery", + "to": "framework/svelte/reference/createQuery" + }, + { + "label": "Functions / createMutation", + "to": "framework/svelte/reference/createMutation" + } + ] + }, + { + "label": "angular", + "children": [ + { + "label": "Angular Reference", + "to": "framework/angular/reference/index" + } + ] } ] }, @@ -891,7 +929,7 @@ }, { "label": "Basic", - "to": "framework/solid/examples/basic-typescript" + "to": "framework/solid/examples/basic" }, { "label": "Basic w/ GraphQL-Request", diff --git a/docs/eslint/eslint-plugin-query.md b/docs/eslint/eslint-plugin-query.md index 661943b8b9..23da9cd354 100644 --- a/docs/eslint/eslint-plugin-query.md +++ b/docs/eslint/eslint-plugin-query.md @@ -19,34 +19,68 @@ $ yarn add -D @tanstack/eslint-plugin-query $ bun add -D @tanstack/eslint-plugin-query ``` -## Usage +## Flat Config (`eslint.config.js`) -To enable all of the recommended rules for our plugin, add `plugin:@tanstack/eslint-plugin-query/recommended` in extends: +### Recommended setup -```json -{ - "extends": ["plugin:@tanstack/eslint-plugin-query/recommended"] -} +To enable all of the recommended rules for our plugin, add the following config: + +```js +import pluginQuery from '@tanstack/eslint-plugin-query' + +export default [ + ...pluginQuery.configs['flat/recommended'], + // Any other config... +] +``` + +### Custom setup + +Alternatively, you can load the plugin and configure only the rules you want to use: + +```js +import pluginQuery from '@tanstack/eslint-plugin-query' + +export default [ + { + plugins: { + '@tanstack/query': pluginQuery, + }, + rules: { + '@tanstack/query/exhaustive-deps': 'error', + }, + }, + // Any other config... +] ``` -### Alternative config +## Legacy Config (`.eslintrc`) -Alternatively, add `@tanstack/eslint-plugin-query` to the plugins section of your `.eslintrc` configuration file: +### Recommended setup + +To enable all of the recommended rules for our plugin, add `plugin:@tanstack/eslint-plugin-query/recommended` in extends: ```json { - "plugins": ["@tanstack/query"] + "extends": ["plugin:@tanstack/eslint-plugin-query/recommended"] } ``` -Then configure the rules you want to use under the rules section: +### Custom setup + +Alternatively, add `@tanstack/eslint-plugin-query` to the plugins section, and configure the rules you want to use: ```json { + "plugins": ["@tanstack/query"], "rules": { - "@tanstack/query/exhaustive-deps": "error", - "@tanstack/query/no-rest-destructuring": "warn", - "@tanstack/query/stable-query-client": "error" + "@tanstack/query/exhaustive-deps": "error" } } ``` + +## Rules + +- [@tanstack/query/exhaustive-deps](../exhaustive-deps) +- [@tanstack/query/no-rest-destructuring](../no-rest-destructuring) +- [@tanstack/query/stable-query-client](../stable-query-client) diff --git a/docs/framework/angular/devtools.md b/docs/framework/angular/devtools.md index b2d8e3c836..394522855d 100644 --- a/docs/framework/angular/devtools.md +++ b/docs/framework/angular/devtools.md @@ -29,7 +29,7 @@ Floating Mode will mount the devtools as a fixed, floating element in your app a Place the following code as high in your Angular app as you can. The closer it is to the root of the page, the better it will work! -```ts +```angular-ts import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental' import { Component } from '@angular/core'; diff --git a/docs/framework/angular/guides/background-fetching-indicators.md b/docs/framework/angular/guides/background-fetching-indicators.md index cae36e009d..5ad6ee3ef4 100644 --- a/docs/framework/angular/guides/background-fetching-indicators.md +++ b/docs/framework/angular/guides/background-fetching-indicators.md @@ -6,7 +6,7 @@ ref: docs/framework/react/guides/background-fetching-indicators.md [//]: # 'Example' -```ts +```angular-ts @Component({ selector: 'posts', template: ` @@ -39,7 +39,7 @@ export class TodosComponent { [//]: # 'Example' [//]: # 'Example2' -```ts +```angular-ts import { injectIsFetching } from '@tanstack/angular-query-experimental' @Component({ diff --git a/docs/framework/angular/guides/disabling-queries.md b/docs/framework/angular/guides/disabling-queries.md index 39b5408586..a57ac39728 100644 --- a/docs/framework/angular/guides/disabling-queries.md +++ b/docs/framework/angular/guides/disabling-queries.md @@ -7,7 +7,7 @@ replace: { 'useQuery': 'injectQuery' } [//]: # 'Example' -```ts +```angular-ts @Component({ selector: 'todos', template: `
@@ -44,7 +44,7 @@ export class TodosComponent { [//]: # 'Example' [//]: # 'Example2' -```ts +```angular-ts @Component({ selector: 'todos', template: ` @@ -69,7 +69,7 @@ export class TodosComponent { [//]: # 'Example2' [//]: # 'Example3' -```ts +```angular-ts @Component({ selector: 'todos', template: ` diff --git a/docs/framework/angular/guides/infinite-queries.md b/docs/framework/angular/guides/infinite-queries.md index d299142600..9fdde83e26 100644 --- a/docs/framework/angular/guides/infinite-queries.md +++ b/docs/framework/angular/guides/infinite-queries.md @@ -8,7 +8,7 @@ replace: [//]: # 'Example' -```ts +```angular-ts import { Component, computed, inject } from '@angular/core' import { injectInfiniteQuery } from '@tanstack/angular-query-experimental' import { lastValueFrom } from 'rxjs' @@ -48,7 +48,7 @@ export class Example { } ``` -```html +```angular-html
@if (query.isPending()) {

Loading...

@@ -70,7 +70,7 @@ export class Example { [//]: # 'Example' [//]: # 'Example1' -```ts +```angular-ts @Component({ template: ` `, }) diff --git a/docs/framework/angular/guides/mutations.md b/docs/framework/angular/guides/mutations.md index b8adc4d039..5ba756d625 100644 --- a/docs/framework/angular/guides/mutations.md +++ b/docs/framework/angular/guides/mutations.md @@ -14,7 +14,7 @@ replace: [//]: # 'Example' -```ts +```angular-ts @Component({ template: `
@@ -45,7 +45,7 @@ export class TodosComponent { [//]: # 'Example2' [//]: # 'Example3' -```ts +```angular-ts @Component({ standalone: true, selector: 'todo-item', diff --git a/docs/framework/angular/guides/optimistic-updates.md b/docs/framework/angular/guides/optimistic-updates.md index 4786759124..08c6931516 100644 --- a/docs/framework/angular/guides/optimistic-updates.md +++ b/docs/framework/angular/guides/optimistic-updates.md @@ -28,7 +28,7 @@ addTodo = injectMutation(() => ({ [//]: # 'ExampleUI1' [//]: # 'ExampleUI2' -```ts +```angular-ts @Component({ template: ` @for (todo of todos.data(); track todo.id) { @@ -45,7 +45,7 @@ class TodosComponent {} [//]: # 'ExampleUI2' [//]: # 'ExampleUI3' -```ts +```angular-ts @Component({ template: ` @if (addTodo.isError()) { diff --git a/docs/framework/angular/guides/paginated-queries.md b/docs/framework/angular/guides/paginated-queries.md index 5dbb4ffcae..3fe42c6a9a 100644 --- a/docs/framework/angular/guides/paginated-queries.md +++ b/docs/framework/angular/guides/paginated-queries.md @@ -22,7 +22,7 @@ const result = injectQuery(() => ({ [//]: # 'Example' [//]: # 'Example2' -```ts +```angular-ts @Component({ selector: 'pagination-example', template: ` diff --git a/docs/framework/angular/guides/queries.md b/docs/framework/angular/guides/queries.md index 88898c13bf..3aa9b75853 100644 --- a/docs/framework/angular/guides/queries.md +++ b/docs/framework/angular/guides/queries.md @@ -33,7 +33,7 @@ result = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList })) [//]: # 'Example2' [//]: # 'Example3' -```ts +```angular-ts @Component({ selector: 'todos', standalone: true, @@ -66,7 +66,7 @@ If booleans aren't your thing, you can always use the `status` state as well: [//]: # 'Example4' -```ts +```angular-ts @Component({ selector: 'todos', standalone: true, diff --git a/docs/framework/angular/guides/query-cancellation.md b/docs/framework/angular/guides/query-cancellation.md index b2884d7255..7699625aad 100644 --- a/docs/framework/angular/guides/query-cancellation.md +++ b/docs/framework/angular/guides/query-cancellation.md @@ -81,7 +81,7 @@ You might want to cancel a query manually. For example, if the request takes a l [//]: # 'Example7' -```ts +```angular-ts @Component({ standalone: true, template: ``, diff --git a/docs/framework/angular/installation.md b/docs/framework/angular/installation.md index cd18b9256f..877f4cf089 100644 --- a/docs/framework/angular/installation.md +++ b/docs/framework/angular/installation.md @@ -10,13 +10,13 @@ title: Installation _Angular Query is compatible with Angular v16 and higher_ ```bash -$ npm i @tanstack/angular-query-experimental +npm i @tanstack/angular-query-experimental # or -$ pnpm add @tanstack/angular-query-experimental +pnpm add @tanstack/angular-query-experimental # or -$ yarn add @tanstack/angular-query-experimental +yarn add @tanstack/angular-query-experimental # or -$ bun add @tanstack/angular-query-experimental +bun add @tanstack/angular-query-experimental ``` > Wanna give it a spin before you download? Try out the [simple](../examples/simple) or [basic](../examples/basic) examples! diff --git a/docs/framework/angular/overview.md b/docs/framework/angular/overview.md index 1eb2882124..06aa5e89f9 100644 --- a/docs/framework/angular/overview.md +++ b/docs/framework/angular/overview.md @@ -60,7 +60,7 @@ In the example below, you can see Angular Query in its most basic and simple for [Open in CodeSandbox](https://codesandbox.io/s/github/tanstack/query/tree/main/examples/angular/simple) -```ts +```angular-ts import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental' import { ChangeDetectionStrategy, Component, inject } from '@angular/core' import { HttpClient } from '@angular/common/http' diff --git a/docs/framework/angular/quick-start.md b/docs/framework/angular/quick-start.md index ff3c29ae6b..f82b85322e 100644 --- a/docs/framework/angular/quick-start.md +++ b/docs/framework/angular/quick-start.md @@ -43,7 +43,7 @@ export class AppModule {} ### Component with query and mutation -```ts +```angular-ts import { Component, Injectable, inject } from '@angular/core' import { HttpClient } from '@angular/common/http' import { lastValueFrom } from 'rxjs' diff --git a/docs/framework/angular/reference/BaseMutationNarrowing.md b/docs/framework/angular/reference/BaseMutationNarrowing.md new file mode 100644 index 0000000000..b8d84d615d --- /dev/null +++ b/docs/framework/angular/reference/BaseMutationNarrowing.md @@ -0,0 +1,96 @@ +--- +id: BaseMutationNarrowing +title: BaseMutationNarrowing +--- + +# Interface: BaseMutationNarrowing\ + +## Type Parameters + +• **TData** = `unknown` + +• **TError** = `DefaultError` + +• **TVariables** = `unknown` + +• **TContext** = `unknown` + +## Properties + +### isError() + +```ts +isError: (this) => this is CreateMutationResult, Object> & Object>; +``` + +#### Parameters + +• **this**: [`CreateMutationResult`](CreateMutationResult.md)\<`TData`, `TError`, `TVariables`, `TContext`, `CreateStatusBasedMutationResult`\<`"error"` \| `"success"` \| `"pending"` \| `"idle"`, `TData`, `TError`, `TVariables`, `TContext`\>\> + +#### Returns + +`this is CreateMutationResult, Object> & Object>` + +#### Defined in + +[types.ts:248](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/types.ts#L248) + +--- + +### isIdle() + +```ts +isIdle: (this) => this is CreateMutationResult, Object> & Object>; +``` + +#### Parameters + +• **this**: [`CreateMutationResult`](CreateMutationResult.md)\<`TData`, `TError`, `TVariables`, `TContext`, `CreateStatusBasedMutationResult`\<`"error"` \| `"success"` \| `"pending"` \| `"idle"`, `TData`, `TError`, `TVariables`, `TContext`\>\> + +#### Returns + +`this is CreateMutationResult, Object> & Object>` + +#### Defined in + +[types.ts:278](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/types.ts#L278) + +--- + +### isPending() + +```ts +isPending: (this) => this is CreateMutationResult, Object> & Object>; +``` + +#### Parameters + +• **this**: [`CreateMutationResult`](CreateMutationResult.md)\<`TData`, `TError`, `TVariables`, `TContext`, `CreateStatusBasedMutationResult`\<`"error"` \| `"success"` \| `"pending"` \| `"idle"`, `TData`, `TError`, `TVariables`, `TContext`\>\> + +#### Returns + +`this is CreateMutationResult, Object> & Object>` + +#### Defined in + +[types.ts:263](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/types.ts#L263) + +--- + +### isSuccess() + +```ts +isSuccess: (this) => this is CreateMutationResult, Object> & Object>; +``` + +#### Parameters + +• **this**: [`CreateMutationResult`](CreateMutationResult.md)\<`TData`, `TError`, `TVariables`, `TContext`, `CreateStatusBasedMutationResult`\<`"error"` \| `"success"` \| `"pending"` \| `"idle"`, `TData`, `TError`, `TVariables`, `TContext`\>\> + +#### Returns + +`this is CreateMutationResult, Object> & Object>` + +#### Defined in + +[types.ts:233](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/types.ts#L233) diff --git a/docs/framework/angular/reference/BaseQueryNarrowing.md b/docs/framework/angular/reference/BaseQueryNarrowing.md new file mode 100644 index 0000000000..f48590b8d6 --- /dev/null +++ b/docs/framework/angular/reference/BaseQueryNarrowing.md @@ -0,0 +1,72 @@ +--- +id: BaseQueryNarrowing +title: BaseQueryNarrowing +--- + +# Interface: BaseQueryNarrowing\ + +## Type Parameters + +• **TData** = `unknown` + +• **TError** = `DefaultError` + +## Properties + +### isError() + +```ts +isError: (this) => this is CreateBaseQueryResult>; +``` + +#### Parameters + +• **this**: [`CreateBaseQueryResult`](CreateBaseQueryResult.md)\<`TData`, `TError`, `QueryObserverResult`\<`TData`, `TError`\>\> + +#### Returns + +`this is CreateBaseQueryResult>` + +#### Defined in + +[types.ts:75](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/types.ts#L75) + +--- + +### isPending() + +```ts +isPending: (this) => this is CreateBaseQueryResult>; +``` + +#### Parameters + +• **this**: [`CreateBaseQueryResult`](CreateBaseQueryResult.md)\<`TData`, `TError`, `QueryObserverResult`\<`TData`, `TError`\>\> + +#### Returns + +`this is CreateBaseQueryResult>` + +#### Defined in + +[types.ts:82](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/types.ts#L82) + +--- + +### isSuccess() + +```ts +isSuccess: (this) => this is CreateBaseQueryResult>; +``` + +#### Parameters + +• **this**: [`CreateBaseQueryResult`](CreateBaseQueryResult.md)\<`TData`, `TError`, `QueryObserverResult`\<`TData`, `TError`\>\> + +#### Returns + +`this is CreateBaseQueryResult>` + +#### Defined in + +[types.ts:68](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/types.ts#L68) diff --git a/docs/framework/angular/reference/CreateBaseMutationResult.md b/docs/framework/angular/reference/CreateBaseMutationResult.md new file mode 100644 index 0000000000..81a9913805 --- /dev/null +++ b/docs/framework/angular/reference/CreateBaseMutationResult.md @@ -0,0 +1,32 @@ +--- +id: CreateBaseMutationResult +title: CreateBaseMutationResult +--- + +# Type Alias: CreateBaseMutationResult\ + +```ts +type CreateBaseMutationResult: Override, object> & object; +``` + +## Type declaration + +### mutateAsync + +```ts +mutateAsync: CreateMutateAsyncFunction +``` + +## Type Parameters + +• **TData** = `unknown` + +• **TError** = `DefaultError` + +• **TVariables** = `unknown` + +• **TContext** = `unknown` + +## Defined in + +[types.ts:198](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/types.ts#L198) diff --git a/docs/framework/angular/reference/CreateBaseQueryOptions.md b/docs/framework/angular/reference/CreateBaseQueryOptions.md new file mode 100644 index 0000000000..c371959980 --- /dev/null +++ b/docs/framework/angular/reference/CreateBaseQueryOptions.md @@ -0,0 +1,22 @@ +--- +id: CreateBaseQueryOptions +title: CreateBaseQueryOptions +--- + +# Interface: CreateBaseQueryOptions\ + +## Extends + +- `QueryObserverOptions`\<`TQueryFnData`, `TError`, `TData`, `TQueryData`, `TQueryKey`\> + +## Type Parameters + +• **TQueryFnData** = `unknown` + +• **TError** = `DefaultError` + +• **TData** = `TQueryFnData` + +• **TQueryData** = `TQueryFnData` + +• **TQueryKey** _extends_ `QueryKey` = `QueryKey` diff --git a/docs/framework/angular/reference/CreateBaseQueryResult.md b/docs/framework/angular/reference/CreateBaseQueryResult.md new file mode 100644 index 0000000000..75874bc14f --- /dev/null +++ b/docs/framework/angular/reference/CreateBaseQueryResult.md @@ -0,0 +1,22 @@ +--- +id: CreateBaseQueryResult +title: CreateBaseQueryResult +--- + +# Type Alias: CreateBaseQueryResult\ + +```ts +type CreateBaseQueryResult: BaseQueryNarrowing & MapToSignals>; +``` + +## Type Parameters + +• **TData** = `unknown` + +• **TError** = `DefaultError` + +• **TState** = `QueryObserverResult`\<`TData`, `TError`\> + +## Defined in + +[types.ts:116](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/types.ts#L116) diff --git a/docs/framework/angular/reference/CreateInfiniteQueryOptions.md b/docs/framework/angular/reference/CreateInfiniteQueryOptions.md new file mode 100644 index 0000000000..dade8e1e30 --- /dev/null +++ b/docs/framework/angular/reference/CreateInfiniteQueryOptions.md @@ -0,0 +1,24 @@ +--- +id: CreateInfiniteQueryOptions +title: CreateInfiniteQueryOptions +--- + +# Interface: CreateInfiniteQueryOptions\ + +## Extends + +- `OmitKeyof`\<`InfiniteQueryObserverOptions`\<`TQueryFnData`, `TError`, `TData`, `TQueryData`, `TQueryKey`, `TPageParam`\>, `"suspense"`\> + +## Type Parameters + +• **TQueryFnData** = `unknown` + +• **TError** = `DefaultError` + +• **TData** = `TQueryFnData` + +• **TQueryData** = `TQueryFnData` + +• **TQueryKey** _extends_ `QueryKey` = `QueryKey` + +• **TPageParam** = `unknown` diff --git a/docs/framework/angular/reference/CreateInfiniteQueryResult.md b/docs/framework/angular/reference/CreateInfiniteQueryResult.md new file mode 100644 index 0000000000..1952fad5e2 --- /dev/null +++ b/docs/framework/angular/reference/CreateInfiniteQueryResult.md @@ -0,0 +1,20 @@ +--- +id: CreateInfiniteQueryResult +title: CreateInfiniteQueryResult +--- + +# Type Alias: CreateInfiniteQueryResult\ + +```ts +type CreateInfiniteQueryResult: MapToSignals>; +``` + +## Type Parameters + +• **TData** = `unknown` + +• **TError** = `DefaultError` + +## Defined in + +[types.ts:143](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/types.ts#L143) diff --git a/docs/framework/angular/reference/CreateMutateAsyncFunction.md b/docs/framework/angular/reference/CreateMutateAsyncFunction.md new file mode 100644 index 0000000000..f72a828f78 --- /dev/null +++ b/docs/framework/angular/reference/CreateMutateAsyncFunction.md @@ -0,0 +1,24 @@ +--- +id: CreateMutateAsyncFunction +title: CreateMutateAsyncFunction +--- + +# Type Alias: CreateMutateAsyncFunction\ + +```ts +type CreateMutateAsyncFunction: MutateFunction; +``` + +## Type Parameters + +• **TData** = `unknown` + +• **TError** = `DefaultError` + +• **TVariables** = `void` + +• **TContext** = `unknown` + +## Defined in + +[types.ts:188](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/types.ts#L188) diff --git a/docs/framework/angular/reference/CreateMutateFunction.md b/docs/framework/angular/reference/CreateMutateFunction.md new file mode 100644 index 0000000000..d045b870d3 --- /dev/null +++ b/docs/framework/angular/reference/CreateMutateFunction.md @@ -0,0 +1,32 @@ +--- +id: CreateMutateFunction +title: CreateMutateFunction +--- + +# Type Alias: CreateMutateFunction()\ + +```ts +type CreateMutateFunction: (...args) => void; +``` + +## Type Parameters + +• **TData** = `unknown` + +• **TError** = `DefaultError` + +• **TVariables** = `void` + +• **TContext** = `unknown` + +## Parameters + +• ...**args**: `Parameters`\<`MutateFunction`\<`TData`, `TError`, `TVariables`, `TContext`\>\> + +## Returns + +`void` + +## Defined in + +[types.ts:176](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/types.ts#L176) diff --git a/docs/framework/angular/reference/CreateMutationOptions.md b/docs/framework/angular/reference/CreateMutationOptions.md new file mode 100644 index 0000000000..ffca256828 --- /dev/null +++ b/docs/framework/angular/reference/CreateMutationOptions.md @@ -0,0 +1,20 @@ +--- +id: CreateMutationOptions +title: CreateMutationOptions +--- + +# Interface: CreateMutationOptions\ + +## Extends + +- `OmitKeyof`\<`MutationObserverOptions`\<`TData`, `TError`, `TVariables`, `TContext`\>, `"_defaulted"`\> + +## Type Parameters + +• **TData** = `unknown` + +• **TError** = `DefaultError` + +• **TVariables** = `void` + +• **TContext** = `unknown` diff --git a/docs/framework/angular/reference/CreateMutationResult.md b/docs/framework/angular/reference/CreateMutationResult.md new file mode 100644 index 0000000000..c242e766ee --- /dev/null +++ b/docs/framework/angular/reference/CreateMutationResult.md @@ -0,0 +1,26 @@ +--- +id: CreateMutationResult +title: CreateMutationResult +--- + +# Type Alias: CreateMutationResult\ + +```ts +type CreateMutationResult: BaseMutationNarrowing & MapToSignals>; +``` + +## Type Parameters + +• **TData** = `unknown` + +• **TError** = `DefaultError` + +• **TVariables** = `unknown` + +• **TContext** = `unknown` + +• **TState** = `CreateStatusBasedMutationResult`\<[`CreateBaseMutationResult`](CreateBaseMutationResult.md)\[`"status"`\], `TData`, `TError`, `TVariables`, `TContext`\> + +## Defined in + +[types.ts:292](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/types.ts#L292) diff --git a/docs/framework/angular/reference/CreateQueryOptions.md b/docs/framework/angular/reference/CreateQueryOptions.md new file mode 100644 index 0000000000..7ed8fc263d --- /dev/null +++ b/docs/framework/angular/reference/CreateQueryOptions.md @@ -0,0 +1,20 @@ +--- +id: CreateQueryOptions +title: CreateQueryOptions +--- + +# Interface: CreateQueryOptions\ + +## Extends + +- `OmitKeyof`\<[`CreateBaseQueryOptions`](CreateBaseQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryFnData`, `TQueryKey`\>, `"suspense"`\> + +## Type Parameters + +• **TQueryFnData** = `unknown` + +• **TError** = `DefaultError` + +• **TData** = `TQueryFnData` + +• **TQueryKey** _extends_ `QueryKey` = `QueryKey` diff --git a/docs/framework/angular/reference/CreateQueryResult.md b/docs/framework/angular/reference/CreateQueryResult.md new file mode 100644 index 0000000000..2cc1ac2bd8 --- /dev/null +++ b/docs/framework/angular/reference/CreateQueryResult.md @@ -0,0 +1,20 @@ +--- +id: CreateQueryResult +title: CreateQueryResult +--- + +# Type Alias: CreateQueryResult\ + +```ts +type CreateQueryResult: CreateBaseQueryResult; +``` + +## Type Parameters + +• **TData** = `unknown` + +• **TError** = `DefaultError` + +## Defined in + +[types.ts:126](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/types.ts#L126) diff --git a/docs/framework/angular/reference/DefinedCreateInfiniteQueryResult.md b/docs/framework/angular/reference/DefinedCreateInfiniteQueryResult.md new file mode 100644 index 0000000000..88f5b4016f --- /dev/null +++ b/docs/framework/angular/reference/DefinedCreateInfiniteQueryResult.md @@ -0,0 +1,22 @@ +--- +id: DefinedCreateInfiniteQueryResult +title: DefinedCreateInfiniteQueryResult +--- + +# Type Alias: DefinedCreateInfiniteQueryResult\ + +```ts +type DefinedCreateInfiniteQueryResult: MapToSignals; +``` + +## Type Parameters + +• **TData** = `unknown` + +• **TError** = `DefaultError` + +• **TDefinedInfiniteQueryObserver** = `DefinedInfiniteQueryObserverResult`\<`TData`, `TError`\> + +## Defined in + +[types.ts:151](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/types.ts#L151) diff --git a/docs/framework/angular/reference/DefinedCreateQueryResult.md b/docs/framework/angular/reference/DefinedCreateQueryResult.md new file mode 100644 index 0000000000..fb905dcc1a --- /dev/null +++ b/docs/framework/angular/reference/DefinedCreateQueryResult.md @@ -0,0 +1,22 @@ +--- +id: DefinedCreateQueryResult +title: DefinedCreateQueryResult +--- + +# Type Alias: DefinedCreateQueryResult\ + +```ts +type DefinedCreateQueryResult: MapToSignals; +``` + +## Type Parameters + +• **TData** = `unknown` + +• **TError** = `DefaultError` + +• **TDefinedQueryObserver** = `DefinedQueryObserverResult`\<`TData`, `TError`\> + +## Defined in + +[types.ts:134](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/types.ts#L134) diff --git a/docs/framework/angular/reference/DefinedInitialDataInfiniteOptions.md b/docs/framework/angular/reference/DefinedInitialDataInfiniteOptions.md new file mode 100644 index 0000000000..df6672c34d --- /dev/null +++ b/docs/framework/angular/reference/DefinedInitialDataInfiniteOptions.md @@ -0,0 +1,34 @@ +--- +id: DefinedInitialDataInfiniteOptions +title: DefinedInitialDataInfiniteOptions +--- + +# Type Alias: DefinedInitialDataInfiniteOptions\ + +```ts +type DefinedInitialDataInfiniteOptions: CreateInfiniteQueryOptions & object; +``` + +## Type declaration + +### initialData + +```ts +initialData: NonUndefinedGuard> | () => NonUndefinedGuard>; +``` + +## Type Parameters + +• **TQueryFnData** + +• **TError** = `DefaultError` + +• **TData** = `InfiniteData`\<`TQueryFnData`\> + +• **TQueryKey** _extends_ `QueryKey` = `QueryKey` + +• **TPageParam** = `unknown` + +## Defined in + +[infinite-query-options.ts:32](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/infinite-query-options.ts#L32) diff --git a/docs/framework/angular/reference/DefinedInitialDataOptions.md b/docs/framework/angular/reference/DefinedInitialDataOptions.md new file mode 100644 index 0000000000..67f9338617 --- /dev/null +++ b/docs/framework/angular/reference/DefinedInitialDataOptions.md @@ -0,0 +1,32 @@ +--- +id: DefinedInitialDataOptions +title: DefinedInitialDataOptions +--- + +# Type Alias: DefinedInitialDataOptions\ + +```ts +type DefinedInitialDataOptions: CreateQueryOptions & object; +``` + +## Type declaration + +### initialData + +```ts +initialData: NonUndefinedGuard | () => NonUndefinedGuard; +``` + +## Type Parameters + +• **TQueryFnData** = `unknown` + +• **TError** = `DefaultError` + +• **TData** = `TQueryFnData` + +• **TQueryKey** _extends_ `QueryKey` = `QueryKey` + +## Defined in + +[query-options.ts:19](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/query-options.ts#L19) diff --git a/docs/framework/angular/reference/InjectMutationStateOptions.md b/docs/framework/angular/reference/InjectMutationStateOptions.md new file mode 100644 index 0000000000..5ba65b1f9e --- /dev/null +++ b/docs/framework/angular/reference/InjectMutationStateOptions.md @@ -0,0 +1,18 @@ +--- +id: InjectMutationStateOptions +title: InjectMutationStateOptions +--- + +# Interface: InjectMutationStateOptions + +## Properties + +### injector? + +```ts +optional injector: Injector; +``` + +#### Defined in + +[inject-mutation-state.ts:43](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/inject-mutation-state.ts#L43) diff --git a/docs/framework/angular/reference/NonUndefinedGuard.md b/docs/framework/angular/reference/NonUndefinedGuard.md new file mode 100644 index 0000000000..5cd7eff03b --- /dev/null +++ b/docs/framework/angular/reference/NonUndefinedGuard.md @@ -0,0 +1,18 @@ +--- +id: NonUndefinedGuard +title: NonUndefinedGuard +--- + +# Type Alias: NonUndefinedGuard\ + +```ts +type NonUndefinedGuard: T extends undefined ? never : T; +``` + +## Type Parameters + +• **T** + +## Defined in + +[types.ts:316](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/types.ts#L316) diff --git a/docs/framework/angular/reference/QueriesOptions.md b/docs/framework/angular/reference/QueriesOptions.md new file mode 100644 index 0000000000..b56da403c7 --- /dev/null +++ b/docs/framework/angular/reference/QueriesOptions.md @@ -0,0 +1,24 @@ +--- +id: QueriesOptions +title: QueriesOptions +--- + +# Type Alias: QueriesOptions\ + +```ts +type QueriesOptions: TDepth["length"] extends MAXIMUM_DEPTH ? QueryObserverOptionsForCreateQueries[] : T extends [] ? [] : T extends [infer Head] ? [...TResult, GetOptions] : T extends [infer Head, ...(infer Tail)] ? QueriesOptions<[...Tail], [...TResult, GetOptions], [...TDepth, 1]> : ReadonlyArray extends T ? T : T extends QueryObserverOptionsForCreateQueries[] ? QueryObserverOptionsForCreateQueries[] : QueryObserverOptionsForCreateQueries[]; +``` + +QueriesOptions reducer recursively unwraps function arguments to infer/enforce type param + +## Type Parameters + +• **T** _extends_ `any`[] + +• **TResult** _extends_ `any`[] = [] + +• **TDepth** _extends_ `ReadonlyArray`\<`number`\> = [] + +## Defined in + +[inject-queries.ts:108](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/inject-queries.ts#L108) diff --git a/docs/framework/angular/reference/QueriesResults.md b/docs/framework/angular/reference/QueriesResults.md new file mode 100644 index 0000000000..c892133971 --- /dev/null +++ b/docs/framework/angular/reference/QueriesResults.md @@ -0,0 +1,24 @@ +--- +id: QueriesResults +title: QueriesResults +--- + +# Type Alias: QueriesResults\ + +```ts +type QueriesResults: TDepth["length"] extends MAXIMUM_DEPTH ? QueryObserverResult[] : T extends [] ? [] : T extends [infer Head] ? [...TResult, GetResults] : T extends [infer Head, ...(infer Tail)] ? QueriesResults<[...Tail], [...TResult, GetResults], [...TDepth, 1]> : T extends QueryObserverOptionsForCreateQueries[] ? QueryObserverResult[] : QueryObserverResult[]; +``` + +QueriesResults reducer recursively maps type param to results + +## Type Parameters + +• **T** _extends_ `any`[] + +• **TResult** _extends_ `any`[] = [] + +• **TDepth** _extends_ `ReadonlyArray`\<`number`\> = [] + +## Defined in + +[inject-queries.ts:151](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/inject-queries.ts#L151) diff --git a/docs/framework/angular/reference/UndefinedInitialDataInfiniteOptions.md b/docs/framework/angular/reference/UndefinedInitialDataInfiniteOptions.md new file mode 100644 index 0000000000..81b2508c91 --- /dev/null +++ b/docs/framework/angular/reference/UndefinedInitialDataInfiniteOptions.md @@ -0,0 +1,34 @@ +--- +id: UndefinedInitialDataInfiniteOptions +title: UndefinedInitialDataInfiniteOptions +--- + +# Type Alias: UndefinedInitialDataInfiniteOptions\ + +```ts +type UndefinedInitialDataInfiniteOptions: CreateInfiniteQueryOptions & object; +``` + +## Type declaration + +### initialData? + +```ts +optional initialData: undefined; +``` + +## Type Parameters + +• **TQueryFnData** + +• **TError** = `DefaultError` + +• **TData** = `InfiniteData`\<`TQueryFnData`\> + +• **TQueryKey** _extends_ `QueryKey` = `QueryKey` + +• **TPageParam** = `unknown` + +## Defined in + +[infinite-query-options.ts:12](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/infinite-query-options.ts#L12) diff --git a/docs/framework/angular/reference/UndefinedInitialDataOptions.md b/docs/framework/angular/reference/UndefinedInitialDataOptions.md new file mode 100644 index 0000000000..3f3aab95f2 --- /dev/null +++ b/docs/framework/angular/reference/UndefinedInitialDataOptions.md @@ -0,0 +1,32 @@ +--- +id: UndefinedInitialDataOptions +title: UndefinedInitialDataOptions +--- + +# Type Alias: UndefinedInitialDataOptions\ + +```ts +type UndefinedInitialDataOptions: CreateQueryOptions & object; +``` + +## Type declaration + +### initialData? + +```ts +optional initialData: undefined; +``` + +## Type Parameters + +• **TQueryFnData** = `unknown` + +• **TError** = `DefaultError` + +• **TData** = `TQueryFnData` + +• **TQueryKey** _extends_ `QueryKey` = `QueryKey` + +## Defined in + +[query-options.ts:7](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/query-options.ts#L7) diff --git a/docs/framework/angular/reference/index.md b/docs/framework/angular/reference/index.md new file mode 100644 index 0000000000..cbfd308e11 --- /dev/null +++ b/docs/framework/angular/reference/index.md @@ -0,0 +1,50 @@ +--- +id: '@tanstack/angular-query-experimental' +title: '@tanstack/angular-query-experimental' +--- + +# @tanstack/angular-query-experimental + +## Interfaces + +- [BaseMutationNarrowing](BaseMutationNarrowing.md) +- [BaseQueryNarrowing](BaseQueryNarrowing.md) +- [CreateBaseQueryOptions](CreateBaseQueryOptions.md) +- [CreateInfiniteQueryOptions](CreateInfiniteQueryOptions.md) +- [CreateMutationOptions](CreateMutationOptions.md) +- [CreateQueryOptions](CreateQueryOptions.md) +- [InjectMutationStateOptions](InjectMutationStateOptions.md) + +## Type Aliases + +- [CreateBaseMutationResult](CreateBaseMutationResult.md) +- [CreateBaseQueryResult](CreateBaseQueryResult.md) +- [CreateInfiniteQueryResult](CreateInfiniteQueryResult.md) +- [CreateMutateAsyncFunction](CreateMutateAsyncFunction.md) +- [CreateMutateFunction](CreateMutateFunction.md) +- [CreateMutationResult](CreateMutationResult.md) +- [CreateQueryResult](CreateQueryResult.md) +- [DefinedCreateInfiniteQueryResult](DefinedCreateInfiniteQueryResult.md) +- [DefinedCreateQueryResult](DefinedCreateQueryResult.md) +- [DefinedInitialDataInfiniteOptions](DefinedInitialDataInfiniteOptions.md) +- [DefinedInitialDataOptions](DefinedInitialDataOptions.md) +- [NonUndefinedGuard](NonUndefinedGuard.md) +- [QueriesOptions](QueriesOptions.md) +- [QueriesResults](QueriesResults.md) +- [UndefinedInitialDataInfiniteOptions](UndefinedInitialDataInfiniteOptions.md) +- [UndefinedInitialDataOptions](UndefinedInitialDataOptions.md) + +## Functions + +- [infiniteQueryOptions](infiniteQueryOptions.md) +- [injectInfiniteQuery](injectInfiniteQuery.md) +- [injectIsFetching](injectIsFetching.md) +- [injectIsMutating](injectIsMutating.md) +- [injectMutation](injectMutation.md) +- [injectMutationState](injectMutationState.md) +- [injectQueries](injectQueries.md) +- [injectQuery](injectQuery.md) +- [injectQueryClient](injectQueryClient.md) +- [provideAngularQuery](provideAngularQuery.md) +- [provideQueryClient](provideQueryClient.md) +- [queryOptions](queryOptions.md) diff --git a/docs/framework/angular/reference/infiniteQueryOptions.md b/docs/framework/angular/reference/infiniteQueryOptions.md new file mode 100644 index 0000000000..f26c21eb4e --- /dev/null +++ b/docs/framework/angular/reference/infiniteQueryOptions.md @@ -0,0 +1,120 @@ +--- +id: infiniteQueryOptions +title: infiniteQueryOptions +--- + +# Function: infiniteQueryOptions() + +Allows to share and re-use infinite query options in a type-safe way. + +The `queryKey` will be tagged with the type from `queryFn`. + +## Param + +The infinite query options to tag with the type from `queryFn`. + +## infiniteQueryOptions(options) + +```ts +function infiniteQueryOptions< + TQueryFnData, + TError, + TData, + TQueryKey, + TPageParam, +>( + options, +): UndefinedInitialDataInfiniteOptions< + TQueryFnData, + TError, + TData, + TQueryKey, + TPageParam +> & + object +``` + +Allows to share and re-use infinite query options in a type-safe way. + +The `queryKey` will be tagged with the type from `queryFn`. + +### Type Parameters + +• **TQueryFnData** + +• **TError** = `Error` + +• **TData** = `InfiniteData`\<`TQueryFnData`, `unknown`\> + +• **TQueryKey** _extends_ `QueryKey` = `QueryKey` + +• **TPageParam** = `unknown` + +### Parameters + +• **options**: [`UndefinedInitialDataInfiniteOptions`](UndefinedInitialDataInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> + +The infinite query options to tag with the type from `queryFn`. + +### Returns + +[`UndefinedInitialDataInfiniteOptions`](UndefinedInitialDataInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> & `object` + +The tagged infinite query options. + +### Defined in + +[infinite-query-options.ts:59](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/infinite-query-options.ts#L59) + +## infiniteQueryOptions(options) + +```ts +function infiniteQueryOptions< + TQueryFnData, + TError, + TData, + TQueryKey, + TPageParam, +>( + options, +): DefinedInitialDataInfiniteOptions< + TQueryFnData, + TError, + TData, + TQueryKey, + TPageParam +> & + object +``` + +Allows to share and re-use infinite query options in a type-safe way. + +The `queryKey` will be tagged with the type from `queryFn`. + +### Type Parameters + +• **TQueryFnData** + +• **TError** = `Error` + +• **TData** = `InfiniteData`\<`TQueryFnData`, `unknown`\> + +• **TQueryKey** _extends_ `QueryKey` = `QueryKey` + +• **TPageParam** = `unknown` + +### Parameters + +• **options**: [`DefinedInitialDataInfiniteOptions`](DefinedInitialDataInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> + +The infinite query options to tag with the type from `queryFn`. + +### Returns + +[`DefinedInitialDataInfiniteOptions`](DefinedInitialDataInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> & `object` + +The tagged infinite query options. + +### Defined in + +[infinite-query-options.ts:91](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/infinite-query-options.ts#L91) diff --git a/docs/framework/angular/reference/injectInfiniteQuery.md b/docs/framework/angular/reference/injectInfiniteQuery.md new file mode 100644 index 0000000000..b013cb562d --- /dev/null +++ b/docs/framework/angular/reference/injectInfiniteQuery.md @@ -0,0 +1,158 @@ +--- +id: injectInfiniteQuery +title: injectInfiniteQuery +--- + +# Function: injectInfiniteQuery() + +Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key. +Infinite queries can additively "load more" data onto an existing set of data or "infinite scroll" + +## Param + +A function that returns infinite query options. + +## Param + +The Angular injector to use. + +## injectInfiniteQuery(optionsFn, injector) + +```ts +function injectInfiniteQuery< + TQueryFnData, + TError, + TData, + TQueryKey, + TPageParam, +>(optionsFn, injector?): CreateInfiniteQueryResult +``` + +Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key. +Infinite queries can additively "load more" data onto an existing set of data or "infinite scroll" + +### Type Parameters + +• **TQueryFnData** + +• **TError** = `Error` + +• **TData** = `InfiniteData`\<`TQueryFnData`, `unknown`\> + +• **TQueryKey** _extends_ `QueryKey` = `QueryKey` + +• **TPageParam** = `unknown` + +### Parameters + +• **optionsFn** + +A function that returns infinite query options. + +• **injector?**: `Injector` + +The Angular injector to use. + +### Returns + +[`CreateInfiniteQueryResult`](CreateInfiniteQueryResult.md)\<`TData`, `TError`\> + +The infinite query result. + +### Defined in + +[inject-infinite-query.ts:30](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/inject-infinite-query.ts#L30) + +## injectInfiniteQuery(optionsFn, injector) + +```ts +function injectInfiniteQuery< + TQueryFnData, + TError, + TData, + TQueryKey, + TPageParam, +>(optionsFn, injector?): DefinedCreateInfiniteQueryResult +``` + +Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key. +Infinite queries can additively "load more" data onto an existing set of data or "infinite scroll" + +### Type Parameters + +• **TQueryFnData** + +• **TError** = `Error` + +• **TData** = `InfiniteData`\<`TQueryFnData`, `unknown`\> + +• **TQueryKey** _extends_ `QueryKey` = `QueryKey` + +• **TPageParam** = `unknown` + +### Parameters + +• **optionsFn** + +A function that returns infinite query options. + +• **injector?**: `Injector` + +The Angular injector to use. + +### Returns + +[`DefinedCreateInfiniteQueryResult`](DefinedCreateInfiniteQueryResult.md)\<`TData`, `TError`\> + +The infinite query result. + +### Defined in + +[inject-infinite-query.ts:57](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/inject-infinite-query.ts#L57) + +## injectInfiniteQuery(optionsFn, injector) + +```ts +function injectInfiniteQuery< + TQueryFnData, + TError, + TData, + TQueryKey, + TPageParam, +>(optionsFn, injector?): CreateInfiniteQueryResult +``` + +Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key. +Infinite queries can additively "load more" data onto an existing set of data or "infinite scroll" + +### Type Parameters + +• **TQueryFnData** + +• **TError** = `Error` + +• **TData** = `InfiniteData`\<`TQueryFnData`, `unknown`\> + +• **TQueryKey** _extends_ `QueryKey` = `QueryKey` + +• **TPageParam** = `unknown` + +### Parameters + +• **optionsFn** + +A function that returns infinite query options. + +• **injector?**: `Injector` + +The Angular injector to use. + +### Returns + +[`CreateInfiniteQueryResult`](CreateInfiniteQueryResult.md)\<`TData`, `TError`\> + +The infinite query result. + +### Defined in + +[inject-infinite-query.ts:84](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/inject-infinite-query.ts#L84) diff --git a/docs/framework/angular/reference/injectIsFetching.md b/docs/framework/angular/reference/injectIsFetching.md new file mode 100644 index 0000000000..c998ea7a69 --- /dev/null +++ b/docs/framework/angular/reference/injectIsFetching.md @@ -0,0 +1,35 @@ +--- +id: injectIsFetching +title: injectIsFetching +--- + +# Function: injectIsFetching() + +```ts +function injectIsFetching(filters?, injector?): Signal +``` + +Injects a signal that tracks the number of queries that your application is loading or +fetching in the background. + +Can be used for app-wide loading indicators + +## Parameters + +• **filters?**: `QueryFilters` + +The filters to apply to the query. + +• **injector?**: `Injector` + +The Angular injector to use. + +## Returns + +`Signal`\<`number`\> + +signal with number of loading or fetching queries. + +## Defined in + +[inject-is-fetching.ts:17](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/inject-is-fetching.ts#L17) diff --git a/docs/framework/angular/reference/injectIsMutating.md b/docs/framework/angular/reference/injectIsMutating.md new file mode 100644 index 0000000000..1016bf049a --- /dev/null +++ b/docs/framework/angular/reference/injectIsMutating.md @@ -0,0 +1,34 @@ +--- +id: injectIsMutating +title: injectIsMutating +--- + +# Function: injectIsMutating() + +```ts +function injectIsMutating(filters?, injector?): Signal +``` + +Injects a signal that tracks the number of mutations that your application is fetching. + +Can be used for app-wide loading indicators + +## Parameters + +• **filters?**: `MutationFilters` + +The filters to apply to the query. + +• **injector?**: `Injector` + +The Angular injector to use. + +## Returns + +`Signal`\<`number`\> + +signal with number of fetching mutations. + +## Defined in + +[inject-is-mutating.ts:16](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/inject-is-mutating.ts#L16) diff --git a/docs/framework/angular/reference/injectMutation.md b/docs/framework/angular/reference/injectMutation.md new file mode 100644 index 0000000000..c2dfacdaa5 --- /dev/null +++ b/docs/framework/angular/reference/injectMutation.md @@ -0,0 +1,47 @@ +--- +id: injectMutation +title: injectMutation +--- + +# Function: injectMutation() + +```ts +function injectMutation( + optionsFn, + injector?, +): CreateMutationResult +``` + +Injects a mutation: an imperative function that can be invoked which typically performs server side effects. + +Unlike queries, mutations are not run automatically. + +## Type Parameters + +• **TData** = `unknown` + +• **TError** = `Error` + +• **TVariables** = `void` + +• **TContext** = `unknown` + +## Parameters + +• **optionsFn** + +A function that returns mutation options. + +• **injector?**: `Injector` + +The Angular injector to use. + +## Returns + +[`CreateMutationResult`](CreateMutationResult.md)\<`TData`, `TError`, `TVariables`, `TContext`\> + +The mutation. + +## Defined in + +[inject-mutation.ts:38](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/inject-mutation.ts#L38) diff --git a/docs/framework/angular/reference/injectMutationState.md b/docs/framework/angular/reference/injectMutationState.md new file mode 100644 index 0000000000..c841b21b31 --- /dev/null +++ b/docs/framework/angular/reference/injectMutationState.md @@ -0,0 +1,39 @@ +--- +id: injectMutationState +title: injectMutationState +--- + +# Function: injectMutationState() + +```ts +function injectMutationState( + mutationStateOptionsFn, + options?, +): Signal +``` + +Injects a signal that tracks the state of all mutations. + +## Type Parameters + +• **TResult** = `MutationState`\<`unknown`, `Error`, `unknown`, `unknown`\> + +## Parameters + +• **mutationStateOptionsFn** = `...` + +A function that returns mutation state options. + +• **options?**: [`InjectMutationStateOptions`](InjectMutationStateOptions.md) + +The Angular injector to use. + +## Returns + +`Signal`\<`TResult`[]\> + +The signal that tracks the state of all mutations. + +## Defined in + +[inject-mutation-state.ts:53](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/inject-mutation-state.ts#L53) diff --git a/docs/framework/angular/reference/injectQueries.md b/docs/framework/angular/reference/injectQueries.md new file mode 100644 index 0000000000..c32d5279fa --- /dev/null +++ b/docs/framework/angular/reference/injectQueries.md @@ -0,0 +1,37 @@ +--- +id: injectQueries +title: injectQueries +--- + +# Function: injectQueries() + +```ts +function injectQueries( + __namedParameters, + injector?, +): Signal +``` + +## Type Parameters + +• **T** _extends_ `any`[] + +• **TCombinedResult** = `T` _extends_ [] ? [] : `T` _extends_ [`Head`] ? [`GetResults`\<`Head`\>] : `T` _extends_ [`Head`, `...Tail[]`] ? [`...Tail[]`] _extends_ [] ? [] : [`...Tail[]`] _extends_ [`Head`] ? [`GetResults`\<`Head`\>, `GetResults`\<`Head`\>] : [`...Tail[]`] _extends_ [`Head`, `...Tail[]`] ? [`...Tail[]`] _extends_ [] ? [] : [`...Tail[]`] _extends_ [`Head`] ? [`GetResults`\<`Head`\>, `GetResults`\<`Head`\>, `GetResults`\<`Head`\>] : [`...Tail[]`] _extends_ [`Head`, `...Tail[]`] ? [`...(...)[]`] _extends_ [] ? [] : ... _extends_ ... ? ... : ... : [`...(...)[]`] _extends_ ...[] ? ...[] : ...[] : [`...Tail[]`] _extends_ `QueryObserverOptionsForCreateQueries`\<`TQueryFnData`, `TError`, `TData`, `any`\>[] ? `QueryObserverResult`\<`unknown` _extends_ `TData` ? `TQueryFnData` : `TData`, `unknown` _extends_ `TError` ? `Error` : `TError`\>[] : `QueryObserverResult`[] : `T` _extends_ `QueryObserverOptionsForCreateQueries`\<`TQueryFnData`, `TError`, `TData`, `any`\>[] ? `QueryObserverResult`\<`unknown` _extends_ `TData` ? `TQueryFnData` : `TData`, `unknown` _extends_ `TError` ? `Error` : `TError`\>[] : `QueryObserverResult`[] + +## Parameters + +• **\_\_namedParameters** + +• **\_\_namedParameters.combine?** + +• **\_\_namedParameters.queries?**: `Signal`\<[`...(T extends [] ? [] : T extends [Head] ? [GetOptions] : T extends [Head, ...Tail[]] ? [...Tail[]] extends [] ? [] : [...Tail[]] extends [Head] ? [GetOptions, GetOptions] : [...Tail[]] extends [Head, ...Tail[]] ? [...(...)[]] extends [] ? [] : (...) extends (...) ? (...) : (...) : readonly (...)[] extends [...(...)[]] ? [...(...)[]] : (...) extends (...) ? (...) : (...) : readonly unknown[] extends T ? T : T extends QueryObserverOptionsForCreateQueries[] ? QueryObserverOptionsForCreateQueries[] : QueryObserverOptionsForCreateQueries[])[]`]\> + +• **injector?**: `Injector` + +## Returns + +`Signal`\<`TCombinedResult`\> + +## Defined in + +[inject-queries.ts:188](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/inject-queries.ts#L188) diff --git a/docs/framework/angular/reference/injectQuery.md b/docs/framework/angular/reference/injectQuery.md new file mode 100644 index 0000000000..dd6b18493a --- /dev/null +++ b/docs/framework/angular/reference/injectQuery.md @@ -0,0 +1,279 @@ +--- +id: injectQuery +title: injectQuery +--- + +# Function: injectQuery() + +Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key. + +**Basic example** + +```ts +class ServiceOrComponent { + query = injectQuery(() => ({ + queryKey: ['repoData'], + queryFn: () => + this.#http.get('https://api.github.com/repos/tanstack/query'), + })) +} +``` + +Similar to `computed` from Angular, the function passed to `injectQuery` will be run in the reactive context. +In the example below, the query will be automatically enabled and executed when the filter signal changes +to a truthy value. When the filter signal changes back to a falsy value, the query will be disabled. + +**Reactive example** + +```ts +class ServiceOrComponent { + filter = signal('') + + todosQuery = injectQuery(() => ({ + queryKey: ['todos', this.filter()], + queryFn: () => fetchTodos(this.filter()), + // Signals can be combined with expressions + enabled: !!this.filter(), + })) +} +``` + +## Param + +A function that returns query options. + +## Param + +The Angular injector to use. + +## See + +https://tanstack.com/query/latest/docs/framework/angular/guides/queries + +## injectQuery(optionsFn, injector) + +```ts +function injectQuery( + optionsFn, + injector?, +): DefinedCreateQueryResult +``` + +Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key. + +**Basic example** + +```ts +class ServiceOrComponent { + query = injectQuery(() => ({ + queryKey: ['repoData'], + queryFn: () => + this.#http.get('https://api.github.com/repos/tanstack/query'), + })) +} +``` + +Similar to `computed` from Angular, the function passed to `injectQuery` will be run in the reactive context. +In the example below, the query will be automatically enabled and executed when the filter signal changes +to a truthy value. When the filter signal changes back to a falsy value, the query will be disabled. + +**Reactive example** + +```ts +class ServiceOrComponent { + filter = signal('') + + todosQuery = injectQuery(() => ({ + queryKey: ['todos', this.filter()], + queryFn: () => fetchTodos(this.filter()), + // Signals can be combined with expressions + enabled: !!this.filter(), + })) +} +``` + +### Type Parameters + +• **TQueryFnData** = `unknown` + +• **TError** = `Error` + +• **TData** = `TQueryFnData` + +• **TQueryKey** _extends_ `QueryKey` = `QueryKey` + +### Parameters + +• **optionsFn** + +A function that returns query options. + +• **injector?**: `Injector` + +The Angular injector to use. + +### Returns + +[`DefinedCreateQueryResult`](DefinedCreateQueryResult.md)\<`TData`, `TError`\> + +The query result. + +### See + +https://tanstack.com/query/latest/docs/framework/angular/guides/queries + +### Defined in + +[inject-query.ts:53](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/inject-query.ts#L53) + +## injectQuery(optionsFn, injector) + +```ts +function injectQuery( + optionsFn, + injector?, +): CreateQueryResult +``` + +Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key. + +**Basic example** + +```ts +class ServiceOrComponent { + query = injectQuery(() => ({ + queryKey: ['repoData'], + queryFn: () => + this.#http.get('https://api.github.com/repos/tanstack/query'), + })) +} +``` + +Similar to `computed` from Angular, the function passed to `injectQuery` will be run in the reactive context. +In the example below, the query will be automatically enabled and executed when the filter signal changes +to a truthy value. When the filter signal changes back to a falsy value, the query will be disabled. + +**Reactive example** + +```ts +class ServiceOrComponent { + filter = signal('') + + todosQuery = injectQuery(() => ({ + queryKey: ['todos', this.filter()], + queryFn: () => fetchTodos(this.filter()), + // Signals can be combined with expressions + enabled: !!this.filter(), + })) +} +``` + +### Type Parameters + +• **TQueryFnData** = `unknown` + +• **TError** = `Error` + +• **TData** = `TQueryFnData` + +• **TQueryKey** _extends_ `QueryKey` = `QueryKey` + +### Parameters + +• **optionsFn** + +A function that returns query options. + +• **injector?**: `Injector` + +The Angular injector to use. + +### Returns + +[`CreateQueryResult`](CreateQueryResult.md)\<`TData`, `TError`\> + +The query result. + +### See + +https://tanstack.com/query/latest/docs/framework/angular/guides/queries + +### Defined in + +[inject-query.ts:102](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/inject-query.ts#L102) + +## injectQuery(optionsFn, injector) + +```ts +function injectQuery( + optionsFn, + injector?, +): CreateQueryResult +``` + +Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key. + +**Basic example** + +```ts +class ServiceOrComponent { + query = injectQuery(() => ({ + queryKey: ['repoData'], + queryFn: () => + this.#http.get('https://api.github.com/repos/tanstack/query'), + })) +} +``` + +Similar to `computed` from Angular, the function passed to `injectQuery` will be run in the reactive context. +In the example below, the query will be automatically enabled and executed when the filter signal changes +to a truthy value. When the filter signal changes back to a falsy value, the query will be disabled. + +**Reactive example** + +```ts +class ServiceOrComponent { + filter = signal('') + + todosQuery = injectQuery(() => ({ + queryKey: ['todos', this.filter()], + queryFn: () => fetchTodos(this.filter()), + // Signals can be combined with expressions + enabled: !!this.filter(), + })) +} +``` + +### Type Parameters + +• **TQueryFnData** = `unknown` + +• **TError** = `Error` + +• **TData** = `TQueryFnData` + +• **TQueryKey** _extends_ `QueryKey` = `QueryKey` + +### Parameters + +• **optionsFn** + +A function that returns query options. + +• **injector?**: `Injector` + +The Angular injector to use. + +### Returns + +[`CreateQueryResult`](CreateQueryResult.md)\<`TData`, `TError`\> + +The query result. + +### See + +https://tanstack.com/query/latest/docs/framework/angular/guides/queries + +### Defined in + +[inject-query.ts:151](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/inject-query.ts#L151) diff --git a/docs/framework/angular/reference/injectQueryClient.md b/docs/framework/angular/reference/injectQueryClient.md new file mode 100644 index 0000000000..53da63baae --- /dev/null +++ b/docs/framework/angular/reference/injectQueryClient.md @@ -0,0 +1,88 @@ +--- +id: injectQueryClient +title: injectQueryClient +--- + +# Function: injectQueryClient() + +Injects the `QueryClient` instance into the component or service. + +**Example** + +```ts +const queryClient = injectQueryClient() +``` + +## injectQueryClient() + +```ts +function injectQueryClient(): QueryClient +``` + +Injects the `QueryClient` instance into the component or service. + +**Example** + +```ts +const queryClient = injectQueryClient() +``` + +### Returns + +`QueryClient` + +### Defined in + +[inject-query-client.ts:16](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/inject-query-client.ts#L16) + +## injectQueryClient(injectOptions) + +```ts +function injectQueryClient(injectOptions): QueryClient +``` + +Injects the `QueryClient` instance into the component or service. + +**Example** + +```ts +const queryClient = injectQueryClient() +``` + +### Parameters + +• **injectOptions**: `InjectOptions` & `object` & `object` + +### Returns + +`QueryClient` + +### Defined in + +[inject-query-client.ts:16](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/inject-query-client.ts#L16) + +## injectQueryClient(injectOptions) + +```ts +function injectQueryClient(injectOptions): null | QueryClient +``` + +Injects the `QueryClient` instance into the component or service. + +**Example** + +```ts +const queryClient = injectQueryClient() +``` + +### Parameters + +• **injectOptions**: `InjectOptions` & `object` + +### Returns + +`null` \| `QueryClient` + +### Defined in + +[inject-query-client.ts:16](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/inject-query-client.ts#L16) diff --git a/docs/framework/angular/reference/provideAngularQuery.md b/docs/framework/angular/reference/provideAngularQuery.md new file mode 100644 index 0000000000..8be6f5af0c --- /dev/null +++ b/docs/framework/angular/reference/provideAngularQuery.md @@ -0,0 +1,64 @@ +--- +id: provideAngularQuery +title: provideAngularQuery +--- + +# Function: provideAngularQuery() + +```ts +function provideAngularQuery(queryClient): EnvironmentProviders +``` + +Sets up providers necessary to enable TanStack Query functionality for Angular applications. + +Allows to configure a `QueryClient`. + +**Example - standalone** + +```ts +import { + provideAngularQuery, + QueryClient, +} from '@tanstack/angular-query-experimental' + +bootstrapApplication(AppComponent, { + providers: [provideAngularQuery(new QueryClient())], +}) +``` + +**Example - NgModule-based** + +```ts +import { + provideAngularQuery, + QueryClient, +} from '@tanstack/angular-query-experimental' + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule], + providers: [provideAngularQuery(new QueryClient())], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` + +## Parameters + +• **queryClient**: `QueryClient` + +A `QueryClient` instance. + +## Returns + +`EnvironmentProviders` + +A set of providers to set up TanStack Query. + +## See + +https://tanstack.com/query/v5/docs/framework/angular/quick-start + +## Defined in + +[providers.ts:50](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/providers.ts#L50) diff --git a/docs/framework/angular/reference/provideQueryClient.md b/docs/framework/angular/reference/provideQueryClient.md new file mode 100644 index 0000000000..f9fbc7efaf --- /dev/null +++ b/docs/framework/angular/reference/provideQueryClient.md @@ -0,0 +1,27 @@ +--- +id: provideQueryClient +title: provideQueryClient +--- + +# Function: provideQueryClient() + +```ts +function provideQueryClient(value): Provider +``` + +Usually [provideAngularQuery](provideAngularQuery.md) is used once to set up TanStack Query and the +[https://tanstack.com/query/latest/docs/reference/QueryClient|QueryClient](https://tanstack.com/query/latest/docs/reference/QueryClient|QueryClient) +for the entire application. You can use `provideQueryClient` to provide a +different `QueryClient` instance for a part of the application. + +## Parameters + +• **value**: `QueryClient` \| () => `QueryClient` + +## Returns + +`Provider` + +## Defined in + +[inject-query-client.ts:25](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/inject-query-client.ts#L25) diff --git a/docs/framework/angular/reference/queryOptions.md b/docs/framework/angular/reference/queryOptions.md new file mode 100644 index 0000000000..2e682f238e --- /dev/null +++ b/docs/framework/angular/reference/queryOptions.md @@ -0,0 +1,132 @@ +--- +id: queryOptions +title: queryOptions +--- + +# Function: queryOptions() + +Allows to share and re-use query options in a type-safe way. + +The `queryKey` will be tagged with the type from `queryFn`. + +**Example** + +```ts +const { queryKey } = queryOptions({ + queryKey: ['key'], + queryFn: () => Promise.resolve(5), + // ^? Promise +}) + +const queryClient = new QueryClient() +const data = queryClient.getQueryData(queryKey) +// ^? number | undefined +``` + +## Param + +The query options to tag with the type from `queryFn`. + +## queryOptions(options) + +```ts +function queryOptions( + options, +): UndefinedInitialDataOptions & object +``` + +Allows to share and re-use query options in a type-safe way. + +The `queryKey` will be tagged with the type from `queryFn`. + +**Example** + +```ts +const { queryKey } = queryOptions({ + queryKey: ['key'], + queryFn: () => Promise.resolve(5), + // ^? Promise +}) + +const queryClient = new QueryClient() +const data = queryClient.getQueryData(queryKey) +// ^? number | undefined +``` + +### Type Parameters + +• **TQueryFnData** = `unknown` + +• **TError** = `Error` + +• **TData** = `TQueryFnData` + +• **TQueryKey** _extends_ `QueryKey` = `QueryKey` + +### Parameters + +• **options**: [`UndefinedInitialDataOptions`](UndefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> + +The query options to tag with the type from `queryFn`. + +### Returns + +[`UndefinedInitialDataOptions`](UndefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> & `object` + +The tagged query options. + +### Defined in + +[query-options.ts:52](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/query-options.ts#L52) + +## queryOptions(options) + +```ts +function queryOptions( + options, +): DefinedInitialDataOptions & object +``` + +Allows to share and re-use query options in a type-safe way. + +The `queryKey` will be tagged with the type from `queryFn`. + +**Example** + +```ts +const { queryKey } = queryOptions({ + queryKey: ['key'], + queryFn: () => Promise.resolve(5), + // ^? Promise +}) + +const queryClient = new QueryClient() +const data = queryClient.getQueryData(queryKey) +// ^? number | undefined +``` + +### Type Parameters + +• **TQueryFnData** = `unknown` + +• **TError** = `Error` + +• **TData** = `TQueryFnData` + +• **TQueryKey** _extends_ `QueryKey` = `QueryKey` + +### Parameters + +• **options**: [`DefinedInitialDataOptions`](DefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> + +The query options to tag with the type from `queryFn`. + +### Returns + +[`DefinedInitialDataOptions`](DefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> & `object` + +The tagged query options. + +### Defined in + +[query-options.ts:85](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/angular-query-experimental/src/query-options.ts#L85) diff --git a/docs/framework/angular/zoneless.md b/docs/framework/angular/zoneless.md new file mode 100644 index 0000000000..fce6156c02 --- /dev/null +++ b/docs/framework/angular/zoneless.md @@ -0,0 +1,11 @@ +--- +id: zoneless +title: Zoneless Angular +--- + +Because the Angular adapter for TanStack Query is built on signals, it fully supports Zoneless! + +Among Zoneless benefits are improved performance and debugging experience. For details see the [Angular documentation](https://angular.dev/guide/experimental/zoneless). + +> Keep in mind that the API for Angular Zoneless is currently experimental and can change in Angular patch versions. +> Besides Zoneless, ZoneJS change detection is also fully supported. diff --git a/docs/framework/react/comparison.md b/docs/framework/react/comparison.md index 78e8d2512c..ffc7eb01a8 100644 --- a/docs/framework/react/comparison.md +++ b/docs/framework/react/comparison.md @@ -36,7 +36,7 @@ Feature/Capability Key: | Infinite Queries | ✅ | ✅ | ✅ | 🛑 | 🛑 | | Bi-directional Infinite Queries | ✅ | 🔶 | 🔶 | 🛑 | 🛑 | | Infinite Query Refetching | ✅ | ✅ | 🛑 | 🛑 | 🛑 | -| Lagged Query Data1 | ✅ | ✅ | 🛑 | ✅ | ✅ | +| Lagged Query Data1 | ✅ | ✅ | ✅ | ✅ | ✅ | | Selectors | ✅ | 🛑 | ✅ | ✅ | N/A | | Initial Data | ✅ | ✅ | ✅ | ✅ | ✅ | | Scroll Recovery | ✅ | ✅ | ✅ | ✅ | ✅ | @@ -48,15 +48,15 @@ Feature/Capability Key: | Offline Mutation Support | ✅ | 🛑 | 🟡 | 🛑 | 🛑 | | Prefetching APIs | ✅ | ✅ | ✅ | ✅ | ✅ | | Query Cancellation | ✅ | 🛑 | 🛑 | 🛑 | ✅ | -| Partial Query Matching3 | ✅ | 🔶 | 🛑 | ✅ | N/A | +| Partial Query Matching3 | ✅ | 🔶 | ✅ | ✅ | N/A | | Stale While Revalidate | ✅ | ✅ | ✅ | ✅ | 🛑 | | Stale Time Configuration | ✅ | 🛑7 | 🛑 | ✅ | 🛑 | -| Pre-usage Query/Mutation Configuration4 | ✅ | 🛑 | 🛑 | ✅ | ✅ | +| Pre-usage Query/Mutation Configuration4 | ✅ | 🛑 | ✅ | ✅ | ✅ | | Window Focus Refetching | ✅ | ✅ | 🛑 | ✅ | 🛑 | | Network Status Refetching | ✅ | ✅ | ✅ | ✅ | 🛑 | | General Cache Dehydration/Rehydration | ✅ | 🛑 | ✅ | ✅ | ✅ | | Offline Caching | ✅ | 🛑 | ✅ | 🔶 | 🛑 | -| React Suspense | ✅ | ✅ | 🛑 | 🛑 | ✅ | +| React Suspense | ✅ | ✅ | ✅ | 🛑 | ✅ | | Abstracted/Agnostic Core | ✅ | 🛑 | ✅ | ✅ | 🛑 | | Automatic Refetch after Mutation5 | 🔶 | 🔶 | ✅ | ✅ | ✅ | | Normalized Caching6 | 🛑 | 🛑 | ✅ | 🛑 | 🛑 | diff --git a/docs/framework/react/guides/advanced-ssr.md b/docs/framework/react/guides/advanced-ssr.md index 33267b084a..bbbac63208 100644 --- a/docs/framework/react/guides/advanced-ssr.md +++ b/docs/framework/react/guides/advanced-ssr.md @@ -30,7 +30,11 @@ The first step of any React Query setup is always to create a `queryClient` and 'use client' // Since QueryClientProvider relies on useContext under the hood, we have to put 'use client' on top -import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { + isServer, + QueryClient, + QueryClientProvider, +} from '@tanstack/react-query' function makeQueryClient() { return new QueryClient({ @@ -47,7 +51,7 @@ function makeQueryClient() { let browserQueryClient: QueryClient | undefined = undefined function getQueryClient() { - if (typeof window === 'undefined') { + if (isServer) { // Server: always make a new query client return makeQueryClient() } else { @@ -188,7 +192,10 @@ Next, we'll look at what the Client Component part looks like: export default function Posts() { // This useQuery could just as well happen in some deeper // child to , data will be available immediately either way - const { data } = useQuery({ queryKey: ['posts'], queryFn: getPosts }) + const { data } = useQuery({ + queryKey: ['posts'], + queryFn: () => getPosts(), + }) // This query was not prefetched on the server and will not start // fetching until on the client, both patterns are fine to mix. @@ -207,6 +214,8 @@ In the SSR guide, we noted that you could get rid of the boilerplate of having ` > NOTE: If you encounter a type error while using async Server Components with TypeScript versions lower than `5.1.3` and `@types/react` versions lower than `18.2.8`, it is recommended to update to the latest versions of both. Alternatively, you can use the temporary workaround of adding `{/* @ts-expect-error Server Component */}` when calling this component inside another. For more information, see [Async Server Component TypeScript Error](https://nextjs.org/docs/app/building-your-application/configuring/typescript#async-server-component-typescript-error) in the Next.js 13 docs. +> NOTE: If you encounter an error `Only plain objects, and a few built-ins, can be passed to Server Actions. Classes or null prototypes are not supported.` make sure that you're **not** passing to queryFn a function reference, instead call the function because queryFn args has a bunch of properties and not all of it would be serializable. see [Server Action only works when queryFn isn't a reference](https://github.com/TanStack/query/issues/6264). + ### Nesting Server Components A nice thing about Server Components is that they can be nested and exist on many levels in the React tree, making it possible to prefetch data closer to where it's actually used instead of only at the top of the application (just like Remix loaders). This can be as simple as a Server Component rendering another Server Component (we'll leave the Client Components out in this example for brevity): @@ -356,7 +365,9 @@ With the prefetching patterns described above, React Query is perfectly compatib As of React Query v5.40.0, you don't have to `await` all prefetches for this to work, as `pending` Queries can also be dehydrated and sent to the client. This lets you kick off prefetches as early as possible without letting them block an entire Suspense boundary, and streams the _data_ to the client as the query finishes. This can be useful for example if you want to prefetch some content that is only visible after some user interaction, or say if you want to `await` and render the first page of an infinite query, but start prefetching page 2 without blocking rendering. -To make this work, we have to instruct the `queryClient` to also `dehydrate` pending Queries. We can do this globally, or by passing that option directly to `hydrate`: +To make this work, we have to instruct the `queryClient` to also `dehydrate` pending Queries. We can do this globally, or by passing that option directly to `hydrate`. + +We will also need to move the `getQueryClient()` function out of our `app/providers.jsx` file as we want to use it in our server component and our client provider. ```tsx // app/get-query-client.ts @@ -369,8 +380,7 @@ function makeQueryClient() { staleTime: 60 * 1000, }, dehydrate: { - // per default, only successful Queries are included, - // this includes pending Queries as well + // include pending queries in dehydration shouldDehydrateQuery: (query) => defaultShouldDehydrateQuery(query) || query.state.status === 'pending', @@ -378,6 +388,22 @@ function makeQueryClient() { }, }) } + +let browserQueryClient: QueryClient | undefined = undefined + +export function getQueryClient() { + if (isServer) { + // Server: always make a new query client + return makeQueryClient() + } else { + // Browser: make a new query client if we don't already have one + // This is very important, so we don't re-make a new client if React + // suspends during the initial render. This may not be needed if we + // have a suspense boundary BELOW the creation of the query client + if (!browserQueryClient) browserQueryClient = makeQueryClient() + return browserQueryClient + } +} ``` > Note: This works in NextJs and Server Components because React can serialize Promises over the wire when you pass them down to Client Components. @@ -386,11 +412,7 @@ Then, all we need to do is provide a `HydrationBoundary`, but we don't need to ` ```tsx // app/posts/page.jsx -import { - dehydrate, - HydrationBoundary, - QueryClient, -} from '@tanstack/react-query' +import { dehydrate, HydrationBoundary } from '@tanstack/react-query' import { getQueryClient } from './get-query-client' import Posts from './posts' @@ -427,6 +449,71 @@ export default function Posts() { > Note that you could also `useQuery` instead of `useSuspenseQuery`, and the Promise would still be picked up correctly. However, NextJs won't suspend in that case and the component will render in the `pending` status, which also opts out of server rendering the content. +If you're using non-JSON data types and serialize the query results on the server, you can specify the `dehydrate.serializeData` and `hydrate.deserializeData` options to serialize and deserialize the data on each side of the boundary to ensure the data in the cache is the same format both on the server and the client: + +```tsx +// app/get-query-client.ts +import { QueryClient, defaultShouldDehydrateQuery } from '@tanstack/react-query' +import { deserialize, serialize } from './transformer' + +function makeQueryClient() { + return new QueryClient({ + defaultOptions: { + // ... + hydrate: { + deserializeData: deserialize, + }, + dehydrate: { + serializeData: serialize, + }, + }, + }) +} + +// ... +``` + +```tsx +// app/posts/page.tsx +import { + dehydrate, + HydrationBoundary, + QueryClient, +} from '@tanstack/react-query' +import { getQueryClient } from './get-query-client' +import { serialize } from './transformer' +import Posts from './posts' + +export default function PostsPage() { + const queryClient = getQueryClient() + + // look ma, no await + queryClient.prefetchQuery({ + queryKey: ['posts'], + queryFn: () => getPosts().then(serialize), // <-- serialize the data on the server + }) + + return ( + + + + ) +} +``` + +```tsx +// app/posts/posts.tsx +'use client' + +export default function Posts() { + const { data } = useSuspenseQuery({ queryKey: ['posts'], queryFn: getPosts }) + + // ... +} +``` + +Now, your `getPosts` function can return e.g. `Temporal` datetime objects and the data will be serialized and deserialized on the client, assuming your transformer can serialize and deserialize those data types. + For more information, check out the [Next.js App with Prefetching Example](../../examples/nextjs-app-prefetching). ## Experimental streaming without prefetching in Next.js @@ -441,7 +528,11 @@ To achieve this, wrap your app in the `ReactQueryStreamedHydration` component: // app/providers.tsx 'use client' -import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { + isServer, + QueryClient, + QueryClientProvider, +} from '@tanstack/react-query' import * as React from 'react' import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental' @@ -460,7 +551,7 @@ function makeQueryClient() { let browserQueryClient: QueryClient | undefined = undefined function getQueryClient() { - if (typeof window === 'undefined') { + if (isServer) { // Server: always make a new query client return makeQueryClient() } else { diff --git a/docs/framework/react/guides/disabling-queries.md b/docs/framework/react/guides/disabling-queries.md index 6893039809..da173f688b 100644 --- a/docs/framework/react/guides/disabling-queries.md +++ b/docs/framework/react/guides/disabling-queries.md @@ -3,7 +3,7 @@ id: disabling-queries title: Disabling/Pausing Queries --- -If you ever want to disable a query from automatically running, you can use the `enabled = false` option. +If you ever want to disable a query from automatically running, you can use the `enabled = false` option. The enabled option also accepts a callback that returns a boolean. When `enabled` is `false`: diff --git a/docs/framework/react/guides/filters.md b/docs/framework/react/guides/filters.md index daca12f69f..a4e20cde67 100644 --- a/docs/framework/react/guides/filters.md +++ b/docs/framework/react/guides/filters.md @@ -70,3 +70,21 @@ A mutation filter object supports the following properties: - Allows for filtering mutations according to their status. - `predicate?: (mutation: Mutation) => boolean` - This predicate function will be used as a final filter on all matching mutations. If no other filters are specified, this function will be evaluated against every mutation in the cache. + +## Utils + +### `matchQuery` + +```tsx +const isMatching = matchQuery(filters, query) +``` + +Returns a boolean that indicates whether a query matches the provided set of query filters. + +### `matchMutation` + +```tsx +const isMatching = matchMutation(filters, mutation) +``` + +Returns a boolean that indicates whether a mutation matches the provided set of mutation filters. diff --git a/docs/framework/react/guides/migrating-to-v5.md b/docs/framework/react/guides/migrating-to-v5.md index aa6ea1a741..ac9f7a5012 100644 --- a/docs/framework/react/guides/migrating-to-v5.md +++ b/docs/framework/react/guides/migrating-to-v5.md @@ -179,7 +179,7 @@ TanStack Query has always had private fields and methods on classes, but they we Almost everyone gets `cacheTime` wrong. It sounds like "the amount of time that data is cached for", but that is not correct. -`cacheTime` does nothing as long as a query is still in used. It only kicks in as soon as the query becomes unused. After the time has passed, data will be "garbage collected" to avoid the cache from growing. +`cacheTime` does nothing as long as a query is still in use. It only kicks in as soon as the query becomes unused. After the time has passed, data will be "garbage collected" to avoid the cache from growing. `gc` is referring to "garbage collect" time. It's a bit more technical, but also a quite [well known abbreviation]() in computer science. @@ -365,7 +365,7 @@ For mutations as well the `status` has been changed from `loading` to `pending` Lastly, a new derived `isLoading` flag has been added to the queries that is implemented as `isPending && isFetching`. This means that `isLoading` and `isInitialLoading` have the same thing, but `isInitialLoading` is deprecated now and will be removed in the next major version. -To understand the reasoning behing this change checkout the [v5 roadmap discussion](https://github.com/TanStack/query/discussions/4252). +To understand the reasoning behind this change checkout the [v5 roadmap discussion](https://github.com/TanStack/query/discussions/4252). ### `hashQueryKey` has been renamed to `hashKey` @@ -381,7 +381,7 @@ React Query v5 requires React 18.0 or later. This is because we are using the ne You could previously use the `contextSharing` property to share the first (and at least one) instance of the query client context across the window. This ensured that if TanStack Query was used across different bundles or microfrontends then they will all use the same instance of the context, regardless of module scoping. -However, isolation is often preferred for microfrontends. In v4 the option to pass a custom context to the `QueryClientProvider` was added, which allows exactly this. If you wish to use the same query client across multiple packages of an application, you can create a `QueryClient` in your application and then let the bundles share this through the `context` property of the `QueryClientProvider`. +With the removal of the custom context prop in v5, refer to the section on [Removed custom context prop in favor of custom queryClient instance](#removed-custom-context-prop-in-favor-of-custom-queryclient-instance). If you wish to share the same query client across multiple packages of an application, you can directly pass a shared custom `queryClient` instance. ### No longer using `unstable_batchedUpdates` as the batching function in React and React Native diff --git a/docs/framework/react/guides/optimistic-updates.md b/docs/framework/react/guides/optimistic-updates.md index f733d305b1..b7607c41e7 100644 --- a/docs/framework/react/guides/optimistic-updates.md +++ b/docs/framework/react/guides/optimistic-updates.md @@ -12,7 +12,7 @@ This is the simpler variant, as it doesn't interact with the cache directly. [//]: # 'ExampleUI1' ```tsx -const { isPending, submittedAt, variables, mutate, isError } = useMutation({ +const addTodoMutation = useMutation({ mutationFn: (newTodo: string) => axios.post('/api/data', { text: newTodo }), // make sure to _return_ the Promise from the query invalidation // so that the mutation stays in `pending` state until the refetch is finished @@ -20,11 +20,13 @@ const { isPending, submittedAt, variables, mutate, isError } = useMutation({ return await queryClient.invalidateQueries({ queryKey: ['todos'] }) }, }) + +const { isPending, submittedAt, variables, mutate, isError } = addTodoMutation ``` [//]: # 'ExampleUI1' -you will then have access to `addTodoMutation.variables`, which contain the added todo. In your UI list, where the query is rendered, you can append another item to the list while the mutation is `pending`: +you will then have access to `addTodoMutation.variables`, which contain the added todo. In your UI list, where the query is rendered, you can append another item to the list while the mutation `isPending`: [//]: # 'ExampleUI2' diff --git a/docs/framework/react/guides/paginated-queries.md b/docs/framework/react/guides/paginated-queries.md index 7ddb8b348a..e46131ab1e 100644 --- a/docs/framework/react/guides/paginated-queries.md +++ b/docs/framework/react/guides/paginated-queries.md @@ -68,7 +68,7 @@ function Todos() { disabled={page === 0} > Previous Page - {' '} + - {isFetching ? Loading... : null}{' '} + {isFetching ? Loading... : null}
) } diff --git a/docs/framework/react/guides/prefetching.md b/docs/framework/react/guides/prefetching.md index 75a5e55a18..53b2e4e8a8 100644 --- a/docs/framework/react/guides/prefetching.md +++ b/docs/framework/react/guides/prefetching.md @@ -196,45 +196,41 @@ This starts fetching `'article-comments'` immediately and flattens the waterfall [//]: # 'Suspense' -If you want to prefetch together with Suspense, you will have to do things a bit differently. You can't use `useSuspenseQueries` to prefetch, since the prefetch would block the component from rendering. You also can not use `useQuery` for the prefetch, because that wouldn't start the prefetch until after suspenseful query had resolved. What you can do is add a small `usePrefetchQuery` function (we might add this to the library itself at a later point): - -```tsx -function usePrefetchQuery(options) { - const queryClient = useQueryClient() - - // This happens in render, but is safe to do because ensureQueryData - // only fetches if there is no data in the cache for this query. This - // means we know no observers are watching the data so the side effect - // is not observable, which is safe. - if (!queryClient.getQueryState(options.queryKey)) { - queryClient.ensureQueryData(options).catch(() => { - // Avoid uncaught error - }) - } -} -``` - -This approach works with both `useQuery` and `useSuspenseQuery`, so feel free to use it as an alternative to the `useQuery({ ..., notifyOnChangeProps: [] })` approach as well. The only tradeoff is that the above function will never fetch and _update_ existing data in the cache if it's stale, but this will usually happen in the later query anyway. +If you want to prefetch together with Suspense, you will have to do things a bit differently. You can't use `useSuspenseQueries` to prefetch, since the prefetch would block the component from rendering. You also can not use `useQuery` for the prefetch, because that wouldn't start the prefetch until after suspenseful query had resolved. For this scenario, you can use the [`usePrefetchQuery`](../../reference/usePrefetchQuery) or the [`usePrefetchInfiniteQuery`](../../reference/usePrefetchInfiniteQuery) hooks available in the library. You can now use `useSuspenseQuery` in the component that actually needs the data. You _might_ want to wrap this later component in its own `` boundary so the "secondary" query we are prefetching does not block rendering of the "primary" data. ```tsx -// Prefetch -usePrefetchQuery({ - queryKey: ['article-comments', id], - queryFn: getArticleCommentsById, -}) +function App() { + usePrefetchQuery({ + queryKey: ['articles'], + queryFn: (...args) => { + return getArticles(...args) + }, + }) -const { data: articleResult } = useSuspenseQuery({ - queryKey: ['article', id], - queryFn: getArticleById, -}) + return ( + + + + ) +} -// In nested component: -const { data: commentsResult } = useSuspenseQuery({ - queryKey: ['article-comments', id], - queryFn: getArticleCommentsById, -}) +function Articles() { + const { data: articles } = useSuspenseQuery({ + queryKey: ['articles'], + queryFn: (...args) => { + return getArticles(...args) + }, + }) + + return articles.map((article) => ( +
+ + +
+ )) +} ``` Another way is to prefetch inside of the query function. This makes sense if you know that every time an article is fetched it's very likely comments will also be needed. For this, we'll use `queryClient.prefetchQuery`: @@ -269,6 +265,7 @@ useEffect(() => { To recap, if you want to prefetch a query during the component lifecycle, there are a few different ways to do it, pick the one that suits your situation best: +- Prefetch before a suspense boundary using `usePrefetchQuery` or `usePrefetchInfiniteQuery` hooks - Use `useQuery` or `useSuspenseQueries` and ignore the result - Prefetch inside the query function - Prefetch in an effect @@ -381,7 +378,7 @@ Because data fetching in the component tree itself can easily lead to request wa In this approach, you explicitly declare for each _route_ what data is going to be needed for that component tree, ahead of time. Because Server Rendering has traditionally needed all data to be loaded before rendering starts, this has been the dominating approach for SSR'd apps for a long time. This is still a common approach and you can read more about it in the [Server Rendering & Hydration guide](../ssr). -For now, let's focus on the client side case and look at an example of how you can make this work with [Tanstack Router](https://tanstack.com/router). These examples leave out a lot of setup and boilerplate to stay concise, you can check out a [full React Query example](https://tanstack.com/router/v1/docs/examples/react/with-react-query?file=src%2Fmain.tsx) over in the [Tanstack Router docs](https://tanstack.com/router/v1/docs). +For now, let's focus on the client side case and look at an example of how you can make this work with [Tanstack Router](https://tanstack.com/router). These examples leave out a lot of setup and boilerplate to stay concise, you can check out a [full React Query example](https://tanstack.com/router/v1/docs/framework/react/examples/basic-react-query-file-based) over in the [Tanstack Router docs](https://tanstack.com/router/v1/docs). When integrating at the router level, you can choose to either _block_ rendering of that route until all data is present, or you can start a prefetch but not await the result. That way, you can start rendering the route as soon as possible. You can also mix these two approaches and await some critical data, but start rendering before all the secondary data has finished loading. In this example, we'll configure an `/article` route to not render until the article data has finished loading, as well as start prefetching comments as soon as possible, but not block rendering the route if comments haven't finished loading yet. diff --git a/docs/framework/react/guides/suspense.md b/docs/framework/react/guides/suspense.md index 2c7a8bc97b..8049078587 100644 --- a/docs/framework/react/guides/suspense.md +++ b/docs/framework/react/guides/suspense.md @@ -118,7 +118,11 @@ To achieve this, wrap your app in the `ReactQueryStreamedHydration` component: // app/providers.tsx 'use client' -import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { + isServer, + QueryClient, + QueryClientProvider, +} from '@tanstack/react-query' import * as React from 'react' import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental' @@ -137,7 +141,7 @@ function makeQueryClient() { let browserQueryClient: QueryClient | undefined = undefined function getQueryClient() { - if (typeof window === 'undefined') { + if (isServer) { // Server: always make a new query client return makeQueryClient() } else { diff --git a/docs/framework/react/installation.md b/docs/framework/react/installation.md index 46862e7d6d..ab0116f674 100644 --- a/docs/framework/react/installation.md +++ b/docs/framework/react/installation.md @@ -10,13 +10,13 @@ or a good ol' ` + + +``` + +## Extends + +- `SvelteComponent_1`\<`Props`, `Events`\> + +## Type Parameters + +• **Props** _extends_ `Record`\<`string`, `any`\> = `any` + +• **Events** _extends_ `Record`\<`string`, `any`\> = `any` + +• **Slots** _extends_ `Record`\<`string`, `any`\> = `any` + +## Indexable + +\[`prop`: `string`\]: `any` + +## Constructors + +### new HydrationBoundary() + +```ts +new HydrationBoundary(options): HydrationBoundary +``` + +#### Parameters + +• **options**: `ComponentConstructorOptions`\<`Props`\> + +#### Returns + +[`HydrationBoundary`](HydrationBoundary.md)\<`Props`, `Events`, `Slots`\> + +#### Overrides + +`SvelteComponent_1.constructor` + +#### Defined in + +node_modules/.pnpm/svelte@4.2.18/node_modules/svelte/types/index.d.ts:144 + +## Properties + +### $$ + +```ts +$$: any +``` + +### PRIVATE API + +Do not use, may change at any time + +#### Inherited from + +`SvelteComponent_1.$$` + +#### Defined in + +node_modules/.pnpm/svelte@4.2.18/node_modules/svelte/types/index.d.ts:102 + +--- + +### $$events_def + +```ts +$$events_def: Events +``` + +For type checking capabilities only. +Does not exist at runtime. + +### DO NOT USE! + +#### Defined in + +node_modules/.pnpm/svelte@4.2.18/node_modules/svelte/types/index.d.ts:158 + +--- + +### $$prop_def + +```ts +$$prop_def: Props +``` + +For type checking capabilities only. +Does not exist at runtime. + +### DO NOT USE! + +#### Defined in + +node_modules/.pnpm/svelte@4.2.18/node_modules/svelte/types/index.d.ts:151 + +--- + +### $$set + +```ts +$$set: any +``` + +### PRIVATE API + +Do not use, may change at any time + +#### Inherited from + +`SvelteComponent_1.$$set` + +#### Defined in + +node_modules/.pnpm/svelte@4.2.18/node_modules/svelte/types/index.d.ts:109 + +--- + +### $$slot_def + +```ts +$$slot_def: Slots +``` + +For type checking capabilities only. +Does not exist at runtime. + +### DO NOT USE! + +#### Defined in + +node_modules/.pnpm/svelte@4.2.18/node_modules/svelte/types/index.d.ts:165 + +## Methods + +### $capture_state() + +```ts +$capture_state(): void +``` + +#### Returns + +`void` + +#### Defined in + +node_modules/.pnpm/svelte@4.2.18/node_modules/svelte/types/index.d.ts:167 + +--- + +### $destroy() + +```ts +$destroy(): void +``` + +#### Returns + +`void` + +#### Inherited from + +`SvelteComponent_1.$destroy` + +#### Defined in + +node_modules/.pnpm/svelte@4.2.18/node_modules/svelte/types/index.d.ts:111 + +--- + +### $inject_state() + +```ts +$inject_state(): void +``` + +#### Returns + +`void` + +#### Defined in + +node_modules/.pnpm/svelte@4.2.18/node_modules/svelte/types/index.d.ts:169 + +--- + +### $on() + +```ts +$on(type, callback): () => void +``` + +#### Type Parameters + +• **K** _extends_ `string` + +#### Parameters + +• **type**: `K` + +• **callback**: `undefined` \| `null` \| (`e`) => `void` + +#### Returns + +`Function` + +##### Returns + +`void` + +#### Inherited from + +`SvelteComponent_1.$on` + +#### Defined in + +node_modules/.pnpm/svelte@4.2.18/node_modules/svelte/types/index.d.ts:113 + +--- + +### $set() + +```ts +$set(props): void +``` + +#### Parameters + +• **props**: `Partial`\<`Props`\> + +#### Returns + +`void` + +#### Inherited from + +`SvelteComponent_1.$set` + +#### Defined in + +node_modules/.pnpm/svelte@4.2.18/node_modules/svelte/types/index.d.ts:115 diff --git a/docs/framework/svelte/reference/MutationStateOptions.md b/docs/framework/svelte/reference/MutationStateOptions.md new file mode 100644 index 0000000000..f728f7dd78 --- /dev/null +++ b/docs/framework/svelte/reference/MutationStateOptions.md @@ -0,0 +1,42 @@ +--- +id: MutationStateOptions +title: MutationStateOptions +--- + +# Type Alias: MutationStateOptions\ + +```ts +type MutationStateOptions: object; +``` + +Options for useMutationState + +## Type Parameters + +• **TResult** = `MutationState` + +## Type declaration + +### filters? + +```ts +optional filters: MutationFilters; +``` + +### select()? + +```ts +optional select: (mutation) => TResult; +``` + +#### Parameters + +• **mutation**: `Mutation`\<`unknown`, `DefaultError`, `unknown`, `unknown`\> + +#### Returns + +`TResult` + +## Defined in + +[packages/svelte-query/src/types.ts:140](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/svelte-query/src/types.ts#L140) diff --git a/docs/framework/svelte/reference/QueriesOptions.md b/docs/framework/svelte/reference/QueriesOptions.md new file mode 100644 index 0000000000..2aefbcec95 --- /dev/null +++ b/docs/framework/svelte/reference/QueriesOptions.md @@ -0,0 +1,24 @@ +--- +id: QueriesOptions +title: QueriesOptions +--- + +# Type Alias: QueriesOptions\ + +```ts +type QueriesOptions: TDepth["length"] extends MAXIMUM_DEPTH ? QueryObserverOptionsForCreateQueries[] : T extends [] ? [] : T extends [infer Head] ? [...TResult, GetOptions] : T extends [infer Head, ...(infer Tail)] ? QueriesOptions<[...Tail], [...TResult, GetOptions], [...TDepth, 1]> : ReadonlyArray extends T ? T : T extends QueryObserverOptionsForCreateQueries[] ? QueryObserverOptionsForCreateQueries[] : QueryObserverOptionsForCreateQueries[]; +``` + +QueriesOptions reducer recursively unwraps function arguments to infer/enforce type param + +## Type Parameters + +• **T** _extends_ `any`[] + +• **TResult** _extends_ `any`[] = [] + +• **TDepth** _extends_ `ReadonlyArray`\<`number`\> = [] + +## Defined in + +[packages/svelte-query/src/createQueries.ts:110](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/svelte-query/src/createQueries.ts#L110) diff --git a/docs/framework/svelte/reference/QueriesResults.md b/docs/framework/svelte/reference/QueriesResults.md new file mode 100644 index 0000000000..d6320eb192 --- /dev/null +++ b/docs/framework/svelte/reference/QueriesResults.md @@ -0,0 +1,24 @@ +--- +id: QueriesResults +title: QueriesResults +--- + +# Type Alias: QueriesResults\ + +```ts +type QueriesResults: TDepth["length"] extends MAXIMUM_DEPTH ? QueryObserverResult[] : T extends [] ? [] : T extends [infer Head] ? [...TResult, GetResults] : T extends [infer Head, ...(infer Tail)] ? QueriesResults<[...Tail], [...TResult, GetResults], [...TDepth, 1]> : T extends QueryObserverOptionsForCreateQueries[] ? QueryObserverResult[] : QueryObserverResult[]; +``` + +QueriesResults reducer recursively maps type param to results + +## Type Parameters + +• **T** _extends_ `any`[] + +• **TResult** _extends_ `any`[] = [] + +• **TDepth** _extends_ `ReadonlyArray`\<`number`\> = [] + +## Defined in + +[packages/svelte-query/src/createQueries.ts:152](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/svelte-query/src/createQueries.ts#L152) diff --git a/docs/framework/svelte/reference/StoreOrVal.md b/docs/framework/svelte/reference/StoreOrVal.md new file mode 100644 index 0000000000..ae6a6b54fc --- /dev/null +++ b/docs/framework/svelte/reference/StoreOrVal.md @@ -0,0 +1,20 @@ +--- +id: StoreOrVal +title: StoreOrVal +--- + +# Type Alias: StoreOrVal\ + +```ts +type StoreOrVal: T | Readable; +``` + +Allows a type to be either the base object or a store of that object + +## Type Parameters + +• **T** + +## Defined in + +[packages/svelte-query/src/types.ts:20](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/svelte-query/src/types.ts#L20) diff --git a/docs/framework/svelte/reference/UndefinedInitialDataOptions.md b/docs/framework/svelte/reference/UndefinedInitialDataOptions.md new file mode 100644 index 0000000000..8607b37866 --- /dev/null +++ b/docs/framework/svelte/reference/UndefinedInitialDataOptions.md @@ -0,0 +1,32 @@ +--- +id: UndefinedInitialDataOptions +title: UndefinedInitialDataOptions +--- + +# Type Alias: UndefinedInitialDataOptions\ + +```ts +type UndefinedInitialDataOptions: CreateQueryOptions & object; +``` + +## Type declaration + +### initialData? + +```ts +optional initialData: undefined; +``` + +## Type Parameters + +• **TQueryFnData** = `unknown` + +• **TError** = `DefaultError` + +• **TData** = `TQueryFnData` + +• **TQueryKey** _extends_ `QueryKey` = `QueryKey` + +## Defined in + +[packages/svelte-query/src/queryOptions.ts:4](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/svelte-query/src/queryOptions.ts#L4) diff --git a/docs/framework/svelte/reference/createInfiniteQuery.md b/docs/framework/svelte/reference/createInfiniteQuery.md new file mode 100644 index 0000000000..f7cde0fdb7 --- /dev/null +++ b/docs/framework/svelte/reference/createInfiniteQuery.md @@ -0,0 +1,42 @@ +--- +id: createInfiniteQuery +title: createInfiniteQuery +--- + +# Function: createInfiniteQuery() + +```ts +function createInfiniteQuery< + TQueryFnData, + TError, + TData, + TQueryKey, + TPageParam, +>(options, queryClient?): CreateInfiniteQueryResult +``` + +## Type Parameters + +• **TQueryFnData** + +• **TError** = `Error` + +• **TData** = `InfiniteData`\<`TQueryFnData`, `unknown`\> + +• **TQueryKey** _extends_ `QueryKey` = `QueryKey` + +• **TPageParam** = `unknown` + +## Parameters + +• **options**: [`StoreOrVal`](StoreOrVal.md)\<[`CreateInfiniteQueryOptions`](CreateInfiniteQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryFnData`, `TQueryKey`, `TPageParam`\>\> + +• **queryClient?**: `QueryClient` + +## Returns + +[`CreateInfiniteQueryResult`](CreateInfiniteQueryResult.md)\<`TData`, `TError`\> + +## Defined in + +[packages/svelte-query/src/createInfiniteQuery.ts:16](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/svelte-query/src/createInfiniteQuery.ts#L16) diff --git a/docs/framework/svelte/reference/createMutation.md b/docs/framework/svelte/reference/createMutation.md new file mode 100644 index 0000000000..8fc780361a --- /dev/null +++ b/docs/framework/svelte/reference/createMutation.md @@ -0,0 +1,37 @@ +--- +id: createMutation +title: createMutation +--- + +# Function: createMutation() + +```ts +function createMutation( + options, + queryClient?, +): CreateMutationResult +``` + +## Type Parameters + +• **TData** = `unknown` + +• **TError** = `Error` + +• **TVariables** = `void` + +• **TContext** = `unknown` + +## Parameters + +• **options**: [`StoreOrVal`](StoreOrVal.md)\<[`CreateMutationOptions`](CreateMutationOptions.md)\<`TData`, `TError`, `TVariables`, `TContext`\>\> + +• **queryClient?**: `QueryClient` + +## Returns + +[`CreateMutationResult`](CreateMutationResult.md)\<`TData`, `TError`, `TVariables`, `TContext`\> + +## Defined in + +[packages/svelte-query/src/createMutation.ts:13](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/svelte-query/src/createMutation.ts#L13) diff --git a/docs/framework/svelte/reference/createQueries.md b/docs/framework/svelte/reference/createQueries.md new file mode 100644 index 0000000000..bb00c13b1a --- /dev/null +++ b/docs/framework/svelte/reference/createQueries.md @@ -0,0 +1,37 @@ +--- +id: createQueries +title: createQueries +--- + +# Function: createQueries() + +```ts +function createQueries( + __namedParameters, + queryClient?, +): Readable +``` + +## Type Parameters + +• **T** _extends_ `any`[] + +• **TCombinedResult** = `T` _extends_ [] ? [] : `T` _extends_ [`Head`] ? [`GetResults`\<`Head`\>] : `T` _extends_ [`Head`, `...Tail[]`] ? [`...Tail[]`] _extends_ [] ? [] : [`...Tail[]`] _extends_ [`Head`] ? [`GetResults`\<`Head`\>, `GetResults`\<`Head`\>] : [`...Tail[]`] _extends_ [`Head`, `...Tail[]`] ? [`...Tail[]`] _extends_ [] ? [] : [`...Tail[]`] _extends_ [`Head`] ? [`GetResults`\<`Head`\>, `GetResults`\<`Head`\>, `GetResults`\<`Head`\>] : [`...Tail[]`] _extends_ [`Head`, `...Tail[]`] ? [`...(...)[]`] _extends_ [] ? [] : ... _extends_ ... ? ... : ... : [`...(...)[]`] _extends_ ...[] ? ...[] : ...[] : [`...Tail[]`] _extends_ `QueryObserverOptionsForCreateQueries`\<`TQueryFnData`, `TError`, `TData`, `any`\>[] ? `QueryObserverResult`\<`unknown` _extends_ `TData` ? `TQueryFnData` : `TData`, `unknown` _extends_ `TError` ? `Error` : `TError`\>[] : `QueryObserverResult`[] : `T` _extends_ `QueryObserverOptionsForCreateQueries`\<`TQueryFnData`, `TError`, `TData`, `any`\>[] ? `QueryObserverResult`\<`unknown` _extends_ `TData` ? `TQueryFnData` : `TData`, `unknown` _extends_ `TError` ? `Error` : `TError`\>[] : `QueryObserverResult`[] + +## Parameters + +• **\_\_namedParameters** + +• **\_\_namedParameters.combine?** + +• **\_\_namedParameters.queries?**: [`StoreOrVal`](StoreOrVal.md)\<[`...(T extends [] ? [] : T extends [Head] ? [GetOptions] : T extends [Head, ...Tail[]] ? [...Tail[]] extends [] ? [] : [...Tail[]] extends [Head] ? [GetOptions, GetOptions] : [...Tail[]] extends [Head, ...Tail[]] ? [...(...)[]] extends [] ? [] : (...) extends (...) ? (...) : (...) : readonly (...)[] extends [...(...)[]] ? [...(...)[]] : (...) extends (...) ? (...) : (...) : readonly unknown[] extends T ? T : T extends QueryObserverOptionsForCreateQueries[] ? QueryObserverOptionsForCreateQueries[] : QueryObserverOptionsForCreateQueries[])[]`]\> + +• **queryClient?**: `QueryClient` + +## Returns + +`Readable`\<`TCombinedResult`\> + +## Defined in + +[packages/svelte-query/src/createQueries.ts:186](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/svelte-query/src/createQueries.ts#L186) diff --git a/docs/framework/svelte/reference/createQuery.md b/docs/framework/svelte/reference/createQuery.md new file mode 100644 index 0000000000..99716abfd4 --- /dev/null +++ b/docs/framework/svelte/reference/createQuery.md @@ -0,0 +1,72 @@ +--- +id: createQuery +title: createQuery +--- + +# Function: createQuery() + +## createQuery(options, queryClient) + +```ts +function createQuery( + options, + queryClient?, +): CreateQueryResult +``` + +### Type Parameters + +• **TQueryFnData** = `unknown` + +• **TError** = `Error` + +• **TData** = `TQueryFnData` + +• **TQueryKey** _extends_ `QueryKey` = `QueryKey` + +### Parameters + +• **options**: [`StoreOrVal`](StoreOrVal.md)\<[`UndefinedInitialDataOptions`](UndefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>\> + +• **queryClient?**: `QueryClient` + +### Returns + +[`CreateQueryResult`](CreateQueryResult.md)\<`TData`, `TError`\> + +### Defined in + +[packages/svelte-query/src/createQuery.ts:15](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/svelte-query/src/createQuery.ts#L15) + +## createQuery(options, queryClient) + +```ts +function createQuery( + options, + queryClient?, +): DefinedCreateQueryResult +``` + +### Type Parameters + +• **TQueryFnData** = `unknown` + +• **TError** = `Error` + +• **TData** = `TQueryFnData` + +• **TQueryKey** _extends_ `QueryKey` = `QueryKey` + +### Parameters + +• **options**: [`StoreOrVal`](StoreOrVal.md)\<[`DefinedInitialDataOptions`](DefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>\> + +• **queryClient?**: `QueryClient` + +### Returns + +[`DefinedCreateQueryResult`](DefinedCreateQueryResult.md)\<`TData`, `TError`\> + +### Defined in + +[packages/svelte-query/src/createQuery.ts:27](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/svelte-query/src/createQuery.ts#L27) diff --git a/docs/framework/svelte/reference/getIsRestoringContext.md b/docs/framework/svelte/reference/getIsRestoringContext.md new file mode 100644 index 0000000000..4b80fe9a1a --- /dev/null +++ b/docs/framework/svelte/reference/getIsRestoringContext.md @@ -0,0 +1,20 @@ +--- +id: getIsRestoringContext +title: getIsRestoringContext +--- + +# Function: getIsRestoringContext() + +```ts +function getIsRestoringContext(): Readable +``` + +Retrieves a `isRestoring` from Svelte's context + +## Returns + +`Readable`\<`boolean`\> + +## Defined in + +[packages/svelte-query/src/context.ts:28](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/svelte-query/src/context.ts#L28) diff --git a/docs/framework/svelte/reference/getQueryClientContext.md b/docs/framework/svelte/reference/getQueryClientContext.md new file mode 100644 index 0000000000..ddbdf7c21d --- /dev/null +++ b/docs/framework/svelte/reference/getQueryClientContext.md @@ -0,0 +1,20 @@ +--- +id: getQueryClientContext +title: getQueryClientContext +--- + +# Function: getQueryClientContext() + +```ts +function getQueryClientContext(): QueryClient +``` + +Retrieves a Client from Svelte's context + +## Returns + +`QueryClient` + +## Defined in + +[packages/svelte-query/src/context.ts:9](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/svelte-query/src/context.ts#L9) diff --git a/docs/framework/svelte/reference/index.md b/docs/framework/svelte/reference/index.md new file mode 100644 index 0000000000..05c9d0834b --- /dev/null +++ b/docs/framework/svelte/reference/index.md @@ -0,0 +1,57 @@ +--- +id: '@tanstack/svelte-query' +title: '@tanstack/svelte-query' +--- + +# @tanstack/svelte-query + +## References + +### QueryClientProvider + +Renames and re-exports [HydrationBoundary](HydrationBoundary.md) + +## Classes + +- [HydrationBoundary](HydrationBoundary.md) + +## Type Aliases + +- [CreateBaseMutationResult](CreateBaseMutationResult.md) +- [CreateBaseQueryOptions](CreateBaseQueryOptions.md) +- [CreateBaseQueryResult](CreateBaseQueryResult.md) +- [CreateInfiniteQueryOptions](CreateInfiniteQueryOptions.md) +- [CreateInfiniteQueryResult](CreateInfiniteQueryResult.md) +- [CreateMutateAsyncFunction](CreateMutateAsyncFunction.md) +- [CreateMutateFunction](CreateMutateFunction.md) +- [CreateMutationOptions](CreateMutationOptions.md) +- [CreateMutationResult](CreateMutationResult.md) +- [CreateQueryOptions](CreateQueryOptions.md) +- [CreateQueryResult](CreateQueryResult.md) +- [DefinedCreateBaseQueryResult](DefinedCreateBaseQueryResult.md) +- [DefinedCreateQueryResult](DefinedCreateQueryResult.md) +- [DefinedInitialDataOptions](DefinedInitialDataOptions.md) +- [MutationStateOptions](MutationStateOptions.md) +- [QueriesOptions](QueriesOptions.md) +- [QueriesResults](QueriesResults.md) +- [StoreOrVal](StoreOrVal.md) +- [UndefinedInitialDataOptions](UndefinedInitialDataOptions.md) + +## Functions + +- [createInfiniteQuery](createInfiniteQuery.md) +- [createMutation](createMutation.md) +- [createQueries](createQueries.md) +- [createQuery](createQuery.md) +- [getIsRestoringContext](getIsRestoringContext.md) +- [getQueryClientContext](getQueryClientContext.md) +- [infiniteQueryOptions](infiniteQueryOptions.md) +- [queryOptions](queryOptions.md) +- [setIsRestoringContext](setIsRestoringContext.md) +- [setQueryClientContext](setQueryClientContext.md) +- [useHydrate](useHydrate.md) +- [useIsFetching](useIsFetching.md) +- [useIsMutating](useIsMutating.md) +- [useIsRestoring](useIsRestoring.md) +- [useMutationState](useMutationState.md) +- [useQueryClient](useQueryClient.md) diff --git a/docs/framework/svelte/reference/infiniteQueryOptions.md b/docs/framework/svelte/reference/infiniteQueryOptions.md new file mode 100644 index 0000000000..7fb5dee1fe --- /dev/null +++ b/docs/framework/svelte/reference/infiniteQueryOptions.md @@ -0,0 +1,49 @@ +--- +id: infiniteQueryOptions +title: infiniteQueryOptions +--- + +# Function: infiniteQueryOptions() + +```ts +function infiniteQueryOptions< + TQueryFnData, + TError, + TData, + TQueryKey, + TPageParam, +>( + options, +): CreateInfiniteQueryOptions< + TQueryFnData, + TError, + TData, + TQueryFnData, + TQueryKey, + TPageParam +> +``` + +## Type Parameters + +• **TQueryFnData** + +• **TError** = `Error` + +• **TData** = `InfiniteData`\<`TQueryFnData`, `unknown`\> + +• **TQueryKey** _extends_ `QueryKey` = `QueryKey` + +• **TPageParam** = `unknown` + +## Parameters + +• **options**: [`CreateInfiniteQueryOptions`](CreateInfiniteQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryFnData`, `TQueryKey`, `TPageParam`\> + +## Returns + +[`CreateInfiniteQueryOptions`](CreateInfiniteQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryFnData`, `TQueryKey`, `TPageParam`\> + +## Defined in + +[packages/svelte-query/src/infiniteQueryOptions.ts:4](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/svelte-query/src/infiniteQueryOptions.ts#L4) diff --git a/docs/framework/svelte/reference/queryOptions.md b/docs/framework/svelte/reference/queryOptions.md new file mode 100644 index 0000000000..bca91eee2a --- /dev/null +++ b/docs/framework/svelte/reference/queryOptions.md @@ -0,0 +1,66 @@ +--- +id: queryOptions +title: queryOptions +--- + +# Function: queryOptions() + +## queryOptions(options) + +```ts +function queryOptions( + options, +): UndefinedInitialDataOptions & object +``` + +### Type Parameters + +• **TQueryFnData** = `unknown` + +• **TError** = `Error` + +• **TData** = `TQueryFnData` + +• **TQueryKey** _extends_ `QueryKey` = `QueryKey` + +### Parameters + +• **options**: [`UndefinedInitialDataOptions`](UndefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> + +### Returns + +[`UndefinedInitialDataOptions`](UndefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> & `object` + +### Defined in + +[packages/svelte-query/src/queryOptions.ts:26](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/svelte-query/src/queryOptions.ts#L26) + +## queryOptions(options) + +```ts +function queryOptions( + options, +): DefinedInitialDataOptions & object +``` + +### Type Parameters + +• **TQueryFnData** = `unknown` + +• **TError** = `Error` + +• **TData** = `TQueryFnData` + +• **TQueryKey** _extends_ `QueryKey` = `QueryKey` + +### Parameters + +• **options**: [`DefinedInitialDataOptions`](DefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> + +### Returns + +[`DefinedInitialDataOptions`](DefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> & `object` + +### Defined in + +[packages/svelte-query/src/queryOptions.ts:37](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/svelte-query/src/queryOptions.ts#L37) diff --git a/docs/framework/svelte/reference/setIsRestoringContext.md b/docs/framework/svelte/reference/setIsRestoringContext.md new file mode 100644 index 0000000000..9c0e8441e4 --- /dev/null +++ b/docs/framework/svelte/reference/setIsRestoringContext.md @@ -0,0 +1,24 @@ +--- +id: setIsRestoringContext +title: setIsRestoringContext +--- + +# Function: setIsRestoringContext() + +```ts +function setIsRestoringContext(isRestoring): void +``` + +Sets a `isRestoring` on Svelte's context + +## Parameters + +• **isRestoring**: `Readable`\<`boolean`\> + +## Returns + +`void` + +## Defined in + +[packages/svelte-query/src/context.ts:40](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/svelte-query/src/context.ts#L40) diff --git a/docs/framework/svelte/reference/setQueryClientContext.md b/docs/framework/svelte/reference/setQueryClientContext.md new file mode 100644 index 0000000000..e39855484e --- /dev/null +++ b/docs/framework/svelte/reference/setQueryClientContext.md @@ -0,0 +1,24 @@ +--- +id: setQueryClientContext +title: setQueryClientContext +--- + +# Function: setQueryClientContext() + +```ts +function setQueryClientContext(client): void +``` + +Sets a QueryClient on Svelte's context + +## Parameters + +• **client**: `QueryClient` + +## Returns + +`void` + +## Defined in + +[packages/svelte-query/src/context.ts:21](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/svelte-query/src/context.ts#L21) diff --git a/docs/framework/svelte/reference/useHydrate.md b/docs/framework/svelte/reference/useHydrate.md new file mode 100644 index 0000000000..6ead965980 --- /dev/null +++ b/docs/framework/svelte/reference/useHydrate.md @@ -0,0 +1,26 @@ +--- +id: useHydrate +title: useHydrate +--- + +# Function: useHydrate() + +```ts +function useHydrate(state?, options?, queryClient?): void +``` + +## Parameters + +• **state?**: `unknown` + +• **options?**: `HydrateOptions` + +• **queryClient?**: `QueryClient` + +## Returns + +`void` + +## Defined in + +[packages/svelte-query/src/useHydrate.ts:8](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/svelte-query/src/useHydrate.ts#L8) diff --git a/docs/framework/svelte/reference/useIsFetching.md b/docs/framework/svelte/reference/useIsFetching.md new file mode 100644 index 0000000000..0969e18e50 --- /dev/null +++ b/docs/framework/svelte/reference/useIsFetching.md @@ -0,0 +1,24 @@ +--- +id: useIsFetching +title: useIsFetching +--- + +# Function: useIsFetching() + +```ts +function useIsFetching(filters?, queryClient?): Readable +``` + +## Parameters + +• **filters?**: `QueryFilters` + +• **queryClient?**: `QueryClient` + +## Returns + +`Readable`\<`number`\> + +## Defined in + +[packages/svelte-query/src/useIsFetching.ts:10](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/svelte-query/src/useIsFetching.ts#L10) diff --git a/docs/framework/svelte/reference/useIsMutating.md b/docs/framework/svelte/reference/useIsMutating.md new file mode 100644 index 0000000000..94bc295e50 --- /dev/null +++ b/docs/framework/svelte/reference/useIsMutating.md @@ -0,0 +1,24 @@ +--- +id: useIsMutating +title: useIsMutating +--- + +# Function: useIsMutating() + +```ts +function useIsMutating(filters?, queryClient?): Readable +``` + +## Parameters + +• **filters?**: `MutationFilters` + +• **queryClient?**: `QueryClient` + +## Returns + +`Readable`\<`number`\> + +## Defined in + +[packages/svelte-query/src/useIsMutating.ts:10](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/svelte-query/src/useIsMutating.ts#L10) diff --git a/docs/framework/svelte/reference/useIsRestoring.md b/docs/framework/svelte/reference/useIsRestoring.md new file mode 100644 index 0000000000..d9eacc2ffb --- /dev/null +++ b/docs/framework/svelte/reference/useIsRestoring.md @@ -0,0 +1,18 @@ +--- +id: useIsRestoring +title: useIsRestoring +--- + +# Function: useIsRestoring() + +```ts +function useIsRestoring(): Readable +``` + +## Returns + +`Readable`\<`boolean`\> + +## Defined in + +[packages/svelte-query/src/useIsRestoring.ts:4](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/svelte-query/src/useIsRestoring.ts#L4) diff --git a/docs/framework/svelte/reference/useMutationState.md b/docs/framework/svelte/reference/useMutationState.md new file mode 100644 index 0000000000..9a5b3ac26c --- /dev/null +++ b/docs/framework/svelte/reference/useMutationState.md @@ -0,0 +1,28 @@ +--- +id: useMutationState +title: useMutationState +--- + +# Function: useMutationState() + +```ts +function useMutationState(options, queryClient?): Readable +``` + +## Type Parameters + +• **TResult** = `MutationState`\<`unknown`, `Error`, `unknown`, `unknown`\> + +## Parameters + +• **options**: [`MutationStateOptions`](MutationStateOptions.md)\<`TResult`\> = `{}` + +• **queryClient?**: `QueryClient` + +## Returns + +`Readable`\<`TResult`[]\> + +## Defined in + +[packages/svelte-query/src/useMutationState.ts:24](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/svelte-query/src/useMutationState.ts#L24) diff --git a/docs/framework/svelte/reference/useQueryClient.md b/docs/framework/svelte/reference/useQueryClient.md new file mode 100644 index 0000000000..c21290de18 --- /dev/null +++ b/docs/framework/svelte/reference/useQueryClient.md @@ -0,0 +1,22 @@ +--- +id: useQueryClient +title: useQueryClient +--- + +# Function: useQueryClient() + +```ts +function useQueryClient(queryClient?): QueryClient +``` + +## Parameters + +• **queryClient?**: `QueryClient` + +## Returns + +`QueryClient` + +## Defined in + +[packages/svelte-query/src/useQueryClient.ts:4](https://github.com/TanStack/query/blob/27861961bbb36e9bc25fcd45cff21b5645f02f9b/packages/svelte-query/src/useQueryClient.ts#L4) diff --git a/docs/framework/vue/community/community-projects.md b/docs/framework/vue/community/community-projects.md index 2950d2a7c6..8c3fbed616 100644 --- a/docs/framework/vue/community/community-projects.md +++ b/docs/framework/vue/community/community-projects.md @@ -12,3 +12,9 @@ There are lots of community projects that build on top of Vue Query and use it t A library for creating typesafe standardized query keys, useful for cache management in `@tanstack/query` Link: https://github.com/lukemorales/query-key-factory + +## Query Rewind + +Time travel and visualize state during development + +Link: https://reactqueryrewind.com/ diff --git a/docs/framework/vue/devtools.md b/docs/framework/vue/devtools.md index 44e17bd9fa..a58aa9995a 100644 --- a/docs/framework/vue/devtools.md +++ b/docs/framework/vue/devtools.md @@ -7,15 +7,10 @@ Wave your hands in the air and shout hooray because Vue Query comes with dedicat When you begin your Vue Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of Vue Query and will likely save you hours of debugging if you find yourself in a pinch! -The only thing you need to do is to install the official **[Vue Devtools](https://devtools.vuejs.org/guide/installation.html)**. - -Vue Query will seamlessly integrate with the official devtools, adding custom inspector and timeline events. -Devtool code will be treeshaken from production bundles by default. - ## Component based Devtools (Vue 3) -You can embeed devtools component into your page by using dedicated package. -Component based devtools are using the same framework-agnostic implementation, have more features and are updated more frequently. +You can directly integrate the devtools component into your page using a dedicated package. +Component-based devtools use a framework-agnostic implementation and are always up-to-date. The devtools component is a separate package that you need to install: @@ -49,19 +44,34 @@ import { VueQueryDevtools } from '@tanstack/vue-query-devtools' ### Options - `initialIsOpen: Boolean` - - Set this `true` if you want the dev tools to default to being open + - Set this `true` if you want the dev tools to default to being open. - `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"` - - Defaults to `bottom-right` - - The position of the React Query logo to open and close the devtools panel + - Defaults to `bottom-right`. + - The position of the React Query logo to open and close the devtools panel. - `position?: "top" | "bottom" | "left" | "right"` - - Defaults to `bottom` - - The position of the React Query devtools panel -- `client?: QueryClient`, + - Defaults to `bottom`. + - The position of the React Query devtools panel. +- `client?: QueryClient` - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used. - `errorTypes?: { name: string; initializer: (query: Query) => TError}` - - Use this to predefine some errors that can be triggered on your queries. Initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error. + - Use this to predefine some errors that can be triggered on your queries. The initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error. - `styleNonce?: string` - Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles. - `shadowDOMTarget?: ShadowRoot` - Default behavior will apply the devtool's styles to the head tag within the DOM. - - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instad of within the head tag in the light DOM. + - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM. + +## Traditional Devtools + +Vue Query will seamlessly integrate with the [Official Vue devtools](https://github.com/vuejs/devtools-next), adding custom inspector and timeline events. +Devtool code will be treeshaken from production bundles by default. + +To make it work, you only need to enable it in the plugin options: + +```ts +app.use(VueQueryPlugin, { + enableDevtoolsV6Plugin: true, +}) +``` + +Both v6 and v7 versions of devtools are supported. diff --git a/docs/framework/vue/installation.md b/docs/framework/vue/installation.md index b32146f2ed..1bb28b1b66 100644 --- a/docs/framework/vue/installation.md +++ b/docs/framework/vue/installation.md @@ -8,13 +8,13 @@ You can install Vue Query via [NPM](https://npmjs.com). ### NPM ```bash -$ npm i @tanstack/vue-query +npm i @tanstack/vue-query # or -$ pnpm add @tanstack/vue-query +pnpm add @tanstack/vue-query # or -$ yarn add @tanstack/vue-query +yarn add @tanstack/vue-query # or -$ bun add @tanstack/vue-query +bun add @tanstack/vue-query ``` > Wanna give it a spin before you download? Try out the [basic](../examples/basic) example! diff --git a/docs/reference/QueryClient.md b/docs/reference/QueryClient.md index cf00006fd4..2f11f7f6c6 100644 --- a/docs/reference/QueryClient.md +++ b/docs/reference/QueryClient.md @@ -62,7 +62,7 @@ Its available methods are: - `defaultOptions?: DefaultOptions` - Optional - Define defaults for all queries and mutations using this queryClient. - - You can also define defaults to be used for [hydration](../../framework/react/reference/hydration.md) + - You can also define defaults to be used for [hydration](../../framework/react/reference/hydration) ## `queryClient.fetchQuery` diff --git a/eslint.config.js b/eslint.config.js new file mode 100644 index 0000000000..ac7d5a5d7f --- /dev/null +++ b/eslint.config.js @@ -0,0 +1,43 @@ +// @ts-check + +// @ts-ignore Needed due to moduleResolution Node vs Bundler +import { tanstackConfig } from '@tanstack/config/eslint' +import pluginCspell from '@cspell/eslint-plugin' + +export default [ + ...tanstackConfig, + { + name: 'tanstack/temp', + plugins: { + cspell: pluginCspell, + }, + rules: { + 'cspell/spellchecker': [ + 'warn', + { + cspell: { + words: [ + 'codemod', // We support our codemod + 'extralight', // Our public interface + 'jscodeshift', + 'Promisable', // Our public interface + 'retryer', // Our public interface + 'solidjs', // Our target framework + 'tabular-nums', // https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric + 'tanstack', // Our package scope + 'todos', // Too general word to be caught as error + 'TSES', // @typescript-eslint package's interface + 'tsqd', // Our public interface (TanStack Query Devtools shorthand) + 'tsup', // We use tsup as builder + 'typecheck', // Field of vite.config.ts + 'vue-demi', // dependency of @tanstack/vue-query + ], + }, + }, + ], + 'ts/ban-types': 'off', + 'ts/no-empty-function': 'off', + 'no-case-declarations': 'off', + }, + }, +] diff --git a/examples/angular/basic/package.json b/examples/angular/basic/package.json index a214351519..2bb102ec1a 100644 --- a/examples/angular/basic/package.json +++ b/examples/angular/basic/package.json @@ -14,7 +14,7 @@ "@angular/core": "^17.3.10", "@angular/platform-browser": "^17.3.10", "@angular/platform-browser-dynamic": "^17.3.10", - "@tanstack/angular-query-experimental": "^5.40.1", + "@tanstack/angular-query-experimental": "^5.51.9", "rxjs": "^7.8.1", "tslib": "^2.6.2", "zone.js": "^0.14.6" @@ -23,7 +23,7 @@ "@angular-devkit/build-angular": "^17.3.8", "@angular/cli": "^17.3.8", "@angular/compiler-cli": "^17.3.10", - "@tanstack/angular-query-devtools-experimental": "^5.40.1", + "@tanstack/angular-query-devtools-experimental": "^5.51.9", "typescript": "5.3.3" } } diff --git a/examples/angular/infinite-query-with-max-pages/package.json b/examples/angular/infinite-query-with-max-pages/package.json index a6b30f9605..5b32ab3efd 100644 --- a/examples/angular/infinite-query-with-max-pages/package.json +++ b/examples/angular/infinite-query-with-max-pages/package.json @@ -1,20 +1,20 @@ { "name": "@tanstack/query-example-angular-infinite-query-with-max-pages", - "version": "0.0.0", + "private": true, + "type": "module", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development" }, - "private": true, "dependencies": { "@angular/common": "^17.3.10", "@angular/compiler": "^17.3.10", "@angular/core": "^17.3.10", "@angular/platform-browser": "^17.3.10", "@angular/platform-browser-dynamic": "^17.3.10", - "@tanstack/angular-query-experimental": "^5.40.1", + "@tanstack/angular-query-experimental": "^5.51.9", "rxjs": "^7.8.1", "tslib": "^2.6.2", "zone.js": "^0.14.6" @@ -23,7 +23,7 @@ "@angular-devkit/build-angular": "^17.3.8", "@angular/cli": "^17.3.8", "@angular/compiler-cli": "^17.3.10", - "@tanstack/angular-query-devtools-experimental": "^5.40.1", + "@tanstack/angular-query-devtools-experimental": "^5.51.9", "typescript": "5.3.3" } } diff --git a/examples/angular/router/package.json b/examples/angular/router/package.json index 19032a8cf2..c814a9f140 100644 --- a/examples/angular/router/package.json +++ b/examples/angular/router/package.json @@ -15,7 +15,7 @@ "@angular/platform-browser": "^17.3.10", "@angular/platform-browser-dynamic": "^17.3.10", "@angular/router": "^17.3.10", - "@tanstack/angular-query-experimental": "^5.40.1", + "@tanstack/angular-query-experimental": "^5.51.9", "rxjs": "^7.8.1", "tslib": "^2.6.2", "zone.js": "^0.14.6" @@ -24,7 +24,7 @@ "@angular-devkit/build-angular": "^17.3.8", "@angular/cli": "^17.3.8", "@angular/compiler-cli": "^17.3.10", - "@tanstack/angular-query-devtools-experimental": "^5.40.1", + "@tanstack/angular-query-devtools-experimental": "^5.51.9", "typescript": "5.3.3" } } diff --git a/examples/angular/simple/package.json b/examples/angular/simple/package.json index e8b56e2275..dfb8a2308e 100644 --- a/examples/angular/simple/package.json +++ b/examples/angular/simple/package.json @@ -15,7 +15,7 @@ "@angular/platform-browser": "^17.3.10", "@angular/platform-browser-dynamic": "^17.3.10", "@angular/router": "^17.3.10", - "@tanstack/angular-query-experimental": "^5.40.1", + "@tanstack/angular-query-experimental": "^5.51.9", "rxjs": "^7.8.1", "tslib": "^2.6.2", "zone.js": "^0.14.6" @@ -24,7 +24,7 @@ "@angular-devkit/build-angular": "^17.3.8", "@angular/cli": "^17.3.8", "@angular/compiler-cli": "^17.3.10", - "@tanstack/angular-query-devtools-experimental": "^5.40.1", + "@tanstack/angular-query-devtools-experimental": "^5.51.9", "typescript": "5.3.3" } } diff --git a/examples/react/algolia/package.json b/examples/react/algolia/package.json index e42d7414b4..5ebedb09c3 100644 --- a/examples/react/algolia/package.json +++ b/examples/react/algolia/package.json @@ -11,30 +11,18 @@ "dependencies": { "@algolia/client-search": "4.23.3", "@algolia/transporter": "4.23.3", - "@tanstack/react-query": "^5.40.1", - "@tanstack/react-query-devtools": "^5.40.1", + "@tanstack/react-query": "^5.51.11", + "@tanstack/react-query-devtools": "^5.51.11", "algoliasearch": "4.23.3", "react": "19.0.0-rc-4c2e457c7c-20240522", "react-dom": "19.0.0-rc-4c2e457c7c-20240522" }, "devDependencies": { - "@tanstack/eslint-plugin-query": "^5.35.6", + "@tanstack/eslint-plugin-query": "^5.51.12", "@types/react": "^18.2.79", "@types/react-dom": "^18.2.25", - "@vitejs/plugin-react": "^4.2.1", + "@vitejs/plugin-react": "^4.3.1", "typescript": "5.3.3", - "vite": "^5.2.11" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] + "vite": "^5.3.3" } } diff --git a/examples/react/algolia/tsconfig.json b/examples/react/algolia/tsconfig.json index 6d545f543f..7c962d9747 100644 --- a/examples/react/algolia/tsconfig.json +++ b/examples/react/algolia/tsconfig.json @@ -7,7 +7,7 @@ "skipLibCheck": true, /* Bundler mode */ - "moduleResolution": "bundler", + "moduleResolution": "Bundler", "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true, diff --git a/examples/react/auto-refetching/next-env.d.ts b/examples/react/auto-refetching/next-env.d.ts new file mode 100644 index 0000000000..4f11a03dc6 --- /dev/null +++ b/examples/react/auto-refetching/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/examples/react/auto-refetching/next.config.js b/examples/react/auto-refetching/next.config.js index 954704d28c..033754658c 100644 --- a/examples/react/auto-refetching/next.config.js +++ b/examples/react/auto-refetching/next.config.js @@ -1,5 +1,13 @@ -module.exports = { +// @ts-check + +/** @type {import('next').NextConfig} */ +const nextConfig = { eslint: { ignoreDuringBuilds: true, }, + typescript: { + ignoreBuildErrors: true, + }, } + +export default nextConfig diff --git a/examples/react/auto-refetching/package.json b/examples/react/auto-refetching/package.json index 38e1366caf..415b9bc432 100644 --- a/examples/react/auto-refetching/package.json +++ b/examples/react/auto-refetching/package.json @@ -1,18 +1,22 @@ { "name": "@tanstack/query-example-react-auto-refetching", "private": true, + "type": "module", "scripts": { "dev": "next", "build": "next build", "start": "next start" }, "dependencies": { - "@tanstack/react-query": "^5.40.1", - "@tanstack/react-query-devtools": "^5.40.1", - "axios": "^1.6.8", - "isomorphic-unfetch": "4.0.2", - "next": "^14.0.0", + "@tanstack/react-query": "^5.51.11", + "@tanstack/react-query-devtools": "^5.51.11", + "next": "^14.2.4", "react": "^18.2.0", "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.2.79", + "@types/react-dom": "^18.2.25", + "typescript": "5.3.3" } } diff --git a/examples/react/auto-refetching/src/pages/api/data.js b/examples/react/auto-refetching/src/pages/api/data.ts similarity index 67% rename from examples/react/auto-refetching/src/pages/api/data.js rename to examples/react/auto-refetching/src/pages/api/data.ts index 9c0cb35897..57faeb3916 100644 --- a/examples/react/auto-refetching/src/pages/api/data.js +++ b/examples/react/auto-refetching/src/pages/api/data.ts @@ -1,7 +1,12 @@ +import type { NextApiRequest, NextApiResponse } from 'next' + // an simple endpoint for getting current list let list = ['Item 1', 'Item 2', 'Item 3'] -export default async (req, res) => { +export default async ( + req: NextApiRequest, + res: NextApiResponse, +) => { if (req.query.add) { if (!list.includes(req.query.add)) { list.push(req.query.add) diff --git a/examples/react/auto-refetching/src/pages/index.js b/examples/react/auto-refetching/src/pages/index.tsx similarity index 91% rename from examples/react/auto-refetching/src/pages/index.js rename to examples/react/auto-refetching/src/pages/index.tsx index 09831ec7d8..470a6e78fa 100644 --- a/examples/react/auto-refetching/src/pages/index.js +++ b/examples/react/auto-refetching/src/pages/index.tsx @@ -1,14 +1,11 @@ import React from 'react' -import axios from 'axios' - -// import { - useQuery, - useQueryClient, - useMutation, QueryClient, QueryClientProvider, + useMutation, + useQuery, + useQueryClient, } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' @@ -29,16 +26,16 @@ function Example() { const { status, data, error, isFetching } = useQuery({ queryKey: ['todos'], - queryFn: async () => { - const res = await axios.get('/api/data') - return res.data + queryFn: async (): Promise> => { + const response = await fetch('/api/data') + return await response.json() }, // Refetch the data every second refetchInterval: intervalMs, }) const addMutation = useMutation({ - mutationFn: (add) => fetch(`/api/data?add=${add}`), + mutationFn: (add: string) => fetch(`/api/data?add=${add}`), onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }), }) @@ -52,7 +49,7 @@ function Example() { return (
-

Auto Refetch with stale-time set to 1s)

+

Auto Refetch with stale-time set to {intervalMs}ms

This example is best experienced on your own machine, where you can open multiple tabs to the same localhost server and see your changes diff --git a/examples/react/auto-refetching/tsconfig.json b/examples/react/auto-refetching/tsconfig.json new file mode 100644 index 0000000000..9575d0eab5 --- /dev/null +++ b/examples/react/auto-refetching/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "Bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +} diff --git a/examples/react/basic-graphql-request/.eslintrc b/examples/react/basic-graphql-request/.eslintrc deleted file mode 100644 index 4e03b9e10b..0000000000 --- a/examples/react/basic-graphql-request/.eslintrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": ["plugin:react/jsx-runtime", "plugin:react-hooks/recommended"] -} diff --git a/examples/react/basic-graphql-request/eslint.config.js b/examples/react/basic-graphql-request/eslint.config.js new file mode 100644 index 0000000000..dee0fcc96c --- /dev/null +++ b/examples/react/basic-graphql-request/eslint.config.js @@ -0,0 +1,19 @@ +import { tanstackConfig } from '@tanstack/config/eslint' +import pluginQuery from '@tanstack/eslint-plugin-query' +import pluginReact from '@eslint-react/eslint-plugin' +import pluginReactHooks from 'eslint-plugin-react-hooks' + +export default [ + ...tanstackConfig, + ...pluginQuery.configs['flat/recommended'], + pluginReact.configs.recommended, + { + plugins: { + 'react-hooks': pluginReactHooks, + }, + rules: { + 'react-hooks/exhaustive-deps': 'error', + 'react-hooks/rules-of-hooks': 'error', + }, + }, +] diff --git a/examples/react/basic-graphql-request/index.html b/examples/react/basic-graphql-request/index.html index 433cf93816..f098940196 100644 --- a/examples/react/basic-graphql-request/index.html +++ b/examples/react/basic-graphql-request/index.html @@ -11,6 +11,6 @@

- + diff --git a/examples/react/basic-graphql-request/package.json b/examples/react/basic-graphql-request/package.json index d84cecbac4..e2720d2168 100644 --- a/examples/react/basic-graphql-request/package.json +++ b/examples/react/basic-graphql-request/package.json @@ -8,27 +8,15 @@ "preview": "vite preview" }, "dependencies": { - "@tanstack/react-query": "^5.40.1", - "@tanstack/react-query-devtools": "^5.40.1", + "@tanstack/react-query": "^5.51.11", + "@tanstack/react-query-devtools": "^5.51.11", "graphql": "^16.8.1", "graphql-request": "^7.0.1", "react": "19.0.0-rc-4c2e457c7c-20240522", "react-dom": "19.0.0-rc-4c2e457c7c-20240522" }, "devDependencies": { - "@vitejs/plugin-react": "^4.2.1", - "vite": "^5.2.11" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] + "@vitejs/plugin-react": "^4.3.1", + "vite": "^5.3.3" } } diff --git a/examples/react/basic-graphql-request/src/index.jsx b/examples/react/basic-graphql-request/src/index.tsx similarity index 84% rename from examples/react/basic-graphql-request/src/index.jsx rename to examples/react/basic-graphql-request/src/index.tsx index b484d73a23..09995939cd 100644 --- a/examples/react/basic-graphql-request/src/index.jsx +++ b/examples/react/basic-graphql-request/src/index.tsx @@ -1,19 +1,24 @@ -/* eslint-disable jsx-a11y/anchor-is-valid */ import React from 'react' import ReactDOM from 'react-dom/client' import { - useQuery, - useQueryClient, QueryClient, QueryClientProvider, + useQuery, + useQueryClient, } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' -import { request, gql } from 'graphql-request' +import { gql, request } from 'graphql-request' const endpoint = 'https://graphqlzero.almansi.me/api' const queryClient = new QueryClient() +type Post = { + id: number + title: string + body: string +} + function App() { const [postId, setPostId] = React.useState(-1) @@ -45,7 +50,7 @@ function usePosts() { queryFn: async () => { const { posts: { data }, - } = await request( + } = await request<{ posts: { data: Array } }>( endpoint, gql` query { @@ -63,7 +68,11 @@ function usePosts() { }) } -function Posts({ setPostId }) { +function Posts({ + setPostId, +}: { + setPostId: React.Dispatch> +}) { const queryClient = useQueryClient() const { status, data, error, isFetching } = usePosts() @@ -107,11 +116,11 @@ function Posts({ setPostId }) { ) } -function usePost(postId) { - return useQuery( - ['post', postId], - async () => { - const { post } = await request( +function usePost(postId: number) { + return useQuery({ + queryKey: ['post', postId], + queryFn: async () => { + const { post } = await request<{ post: Post }>( endpoint, gql` query { @@ -126,13 +135,17 @@ function usePost(postId) { return post }, - { - enabled: !!postId, - }, - ) + enabled: !!postId, + }) } -function Post({ postId, setPostId }) { +function Post({ + postId, + setPostId, +}: { + postId: number + setPostId: React.Dispatch> +}) { const { status, data, error, isFetching } = usePost(postId) return ( @@ -159,5 +172,5 @@ function Post({ postId, setPostId }) { ) } -const rootElement = document.getElementById('root') +const rootElement = document.getElementById('root') as HTMLElement ReactDOM.createRoot(rootElement).render() diff --git a/examples/react/basic-typescript/tsconfig.json b/examples/react/basic-graphql-request/tsconfig.json similarity index 86% rename from examples/react/basic-typescript/tsconfig.json rename to examples/react/basic-graphql-request/tsconfig.json index 6d545f543f..23a8707ef4 100644 --- a/examples/react/basic-typescript/tsconfig.json +++ b/examples/react/basic-graphql-request/tsconfig.json @@ -7,7 +7,7 @@ "skipLibCheck": true, /* Bundler mode */ - "moduleResolution": "bundler", + "moduleResolution": "Bundler", "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true, @@ -20,5 +20,5 @@ "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, - "include": ["src"] + "include": ["src", "eslint.config.js"] } diff --git a/examples/react/basic-typescript/.eslintrc b/examples/react/basic-typescript/.eslintrc deleted file mode 100644 index 270fbc9ac0..0000000000 --- a/examples/react/basic-typescript/.eslintrc +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": [ - "plugin:react/jsx-runtime", - "plugin:react-hooks/recommended", - "plugin:@tanstack/eslint-plugin-query/recommended" - ] -} diff --git a/examples/react/basic-typescript/.gitignore b/examples/react/basic-typescript/.gitignore deleted file mode 100644 index 4673b022e5..0000000000 --- a/examples/react/basic-typescript/.gitignore +++ /dev/null @@ -1,27 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# production -/build - -pnpm-lock.yaml -yarn.lock -package-lock.json - -# misc -.DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local - -npm-debug.log* -yarn-debug.log* -yarn-error.log* diff --git a/examples/react/basic-typescript/README.md b/examples/react/basic-typescript/README.md deleted file mode 100644 index 1cf8892652..0000000000 --- a/examples/react/basic-typescript/README.md +++ /dev/null @@ -1,6 +0,0 @@ -# Example - -To run this example: - -- `npm install` -- `npm run dev` diff --git a/examples/react/basic-typescript/index.html b/examples/react/basic-typescript/index.html deleted file mode 100644 index aed742fcef..0000000000 --- a/examples/react/basic-typescript/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - TanStack Query React Basic TypeScript Example App - - - -
- - - diff --git a/examples/react/basic-typescript/package.json b/examples/react/basic-typescript/package.json deleted file mode 100644 index 446fc0d340..0000000000 --- a/examples/react/basic-typescript/package.json +++ /dev/null @@ -1,42 +0,0 @@ -{ - "name": "@tanstack/query-example-react-basic-typescript", - "private": true, - "type": "module", - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview", - "test:types": "tsc" - }, - "dependencies": { - "@tanstack/query-sync-storage-persister": "^5.40.0", - "@tanstack/react-query": "^5.40.1", - "@tanstack/react-query-devtools": "^5.40.1", - "@tanstack/react-query-persist-client": "^5.40.1", - "axios": "^1.6.8", - "react": "19.0.0-rc-4c2e457c7c-20240522", - "react-dom": "19.0.0-rc-4c2e457c7c-20240522" - }, - "devDependencies": { - "@tanstack/eslint-plugin-query": "^5.35.6", - "@types/react": "^18.2.79", - "@types/react-dom": "^18.2.25", - "@vitejs/plugin-react": "^4.2.1", - "eslint": "^8.56.0", - "eslint-config-prettier": "^9.1.0", - "typescript": "5.3.3", - "vite": "^5.2.11" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - } -} diff --git a/examples/react/basic-typescript/public/emblem-light.svg b/examples/react/basic-typescript/public/emblem-light.svg deleted file mode 100644 index a58e69ad5e..0000000000 --- a/examples/react/basic-typescript/public/emblem-light.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - emblem-light - Created with Sketch. - - - - - - - - \ No newline at end of file diff --git a/examples/react/basic/.eslintrc b/examples/react/basic/.eslintrc deleted file mode 100644 index 270fbc9ac0..0000000000 --- a/examples/react/basic/.eslintrc +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": [ - "plugin:react/jsx-runtime", - "plugin:react-hooks/recommended", - "plugin:@tanstack/eslint-plugin-query/recommended" - ] -} diff --git a/examples/react/basic/eslint.config.js b/examples/react/basic/eslint.config.js new file mode 100644 index 0000000000..dee0fcc96c --- /dev/null +++ b/examples/react/basic/eslint.config.js @@ -0,0 +1,19 @@ +import { tanstackConfig } from '@tanstack/config/eslint' +import pluginQuery from '@tanstack/eslint-plugin-query' +import pluginReact from '@eslint-react/eslint-plugin' +import pluginReactHooks from 'eslint-plugin-react-hooks' + +export default [ + ...tanstackConfig, + ...pluginQuery.configs['flat/recommended'], + pluginReact.configs.recommended, + { + plugins: { + 'react-hooks': pluginReactHooks, + }, + rules: { + 'react-hooks/exhaustive-deps': 'error', + 'react-hooks/rules-of-hooks': 'error', + }, + }, +] diff --git a/examples/react/basic/index.html b/examples/react/basic/index.html index acfcd2e4e5..d7c231330c 100644 --- a/examples/react/basic/index.html +++ b/examples/react/basic/index.html @@ -11,6 +11,6 @@
- + diff --git a/examples/react/basic/package.json b/examples/react/basic/package.json index e94dd4c94c..b6477bdb39 100644 --- a/examples/react/basic/package.json +++ b/examples/react/basic/package.json @@ -5,30 +5,24 @@ "scripts": { "dev": "vite", "build": "vite build", - "preview": "vite preview" + "preview": "vite preview", + "test:types": "tsc" }, "dependencies": { - "@tanstack/react-query": "^5.40.1", - "@tanstack/react-query-devtools": "^5.40.1", - "axios": "^1.6.8", + "@tanstack/query-sync-storage-persister": "^5.51.9", + "@tanstack/react-query": "^5.51.11", + "@tanstack/react-query-devtools": "^5.51.11", + "@tanstack/react-query-persist-client": "^5.51.11", "react": "19.0.0-rc-4c2e457c7c-20240522", "react-dom": "19.0.0-rc-4c2e457c7c-20240522" }, "devDependencies": { - "@tanstack/eslint-plugin-query": "^5.35.6", - "@vitejs/plugin-react": "^4.2.1", - "vite": "^5.2.11" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] + "@tanstack/eslint-plugin-query": "^5.51.12", + "@types/react": "^18.2.79", + "@types/react-dom": "^18.2.25", + "@vitejs/plugin-react": "^4.3.1", + "eslint": "^8.57.0", + "typescript": "5.3.3", + "vite": "^5.3.3" } } diff --git a/examples/react/basic/src/index.jsx b/examples/react/basic/src/index.jsx deleted file mode 100644 index e038ea9b33..0000000000 --- a/examples/react/basic/src/index.jsx +++ /dev/null @@ -1,139 +0,0 @@ -/* eslint-disable jsx-a11y/anchor-is-valid */ -import React from 'react' -import ReactDOM from 'react-dom/client' -import axios from 'axios' -import { - useQuery, - useQueryClient, - QueryClient, - QueryClientProvider, -} from '@tanstack/react-query' -import { ReactQueryDevtools } from '@tanstack/react-query-devtools' - -const queryClient = new QueryClient() - -function App() { - const [postId, setPostId] = React.useState(-1) - - return ( - -

- As you visit the posts below, you will notice them in a loading state - the first time you load them. However, after you return to this list and - click on any posts you have already visited again, you will see them - load instantly and background refresh right before your eyes!{' '} - - (You may need to throttle your network speed to simulate longer - loading sequences) - -

- {postId > -1 ? ( - - ) : ( - - )} - - - ) -} - -function usePosts() { - return useQuery({ - queryKey: ['posts'], - queryFn: async () => { - const { data } = await axios.get( - 'https://jsonplaceholder.typicode.com/posts', - ) - return data - }, - }) -} - -function Posts({ setPostId }) { - const queryClient = useQueryClient() - const { status, data, error, isFetching } = usePosts() - - return ( -
-

Posts

-
- {status === 'pending' ? ( - 'Loading...' - ) : status === 'error' ? ( - Error: {error.message} - ) : ( - <> - -
{isFetching ? 'Background Updating...' : ' '}
- - )} -
-
- ) -} - -const getPostById = async (id) => { - const { data } = await axios.get( - `https://jsonplaceholder.typicode.com/posts/${id}`, - ) - return data -} - -function usePost(postId) { - return useQuery({ - queryKey: ['post', postId], - queryFn: () => getPostById(postId), - enabled: !!postId, - }) -} - -function Post({ postId, setPostId }) { - const { status, data, error, isFetching } = usePost(postId) - - return ( -
- - {!postId || status === 'pending' ? ( - 'Loading...' - ) : status === 'error' ? ( - Error: {error.message} - ) : ( - <> -

{data.title}

-
-

{data.body}

-
-
{isFetching ? 'Background Updating...' : ' '}
- - )} -
- ) -} - -const rootElement = document.getElementById('root') -ReactDOM.createRoot(rootElement).render() diff --git a/examples/react/basic-typescript/src/index.tsx b/examples/react/basic/src/index.tsx similarity index 86% rename from examples/react/basic-typescript/src/index.tsx rename to examples/react/basic/src/index.tsx index 09d700c7c1..052ce4c797 100644 --- a/examples/react/basic-typescript/src/index.tsx +++ b/examples/react/basic/src/index.tsx @@ -1,13 +1,6 @@ -/* eslint-disable jsx-a11y/anchor-is-valid */ import * as React from 'react' import ReactDOM from 'react-dom/client' -import axios from 'axios' -import { - QueryClient, - skipToken, - useQuery, - useQueryClient, -} from '@tanstack/react-query' +import { QueryClient, useQuery, useQueryClient } from '@tanstack/react-query' import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client' import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' @@ -34,10 +27,8 @@ function usePosts() { return useQuery({ queryKey: ['posts'], queryFn: async (): Promise> => { - const { data } = await axios.get( - 'https://jsonplaceholder.typicode.com/posts', - ) - return data + const response = await fetch('https://jsonplaceholder.typicode.com/posts') + return await response.json() }, }) } @@ -56,12 +47,12 @@ function Posts({
{status === 'pending' ? ( 'Loading...' - ) : error instanceof Error ? ( + ) : status === 'error' ? ( Error: {error.message} ) : ( <> {!postId || status === 'pending' ? ( 'Loading...' - ) : error instanceof Error ? ( + ) : status === 'error' ? ( Error: {error.message} ) : ( <> -

{data?.title}

+

{data.title}

-

{data?.body}

+

{data.body}

{isFetching ? 'Background Updating...' : ' '}
diff --git a/examples/react/basic/tsconfig.json b/examples/react/basic/tsconfig.json new file mode 100644 index 0000000000..23a8707ef4 --- /dev/null +++ b/examples/react/basic/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "Bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src", "eslint.config.js"] +} diff --git a/examples/react/basic-typescript/vite.config.ts b/examples/react/basic/vite.config.ts similarity index 100% rename from examples/react/basic-typescript/vite.config.ts rename to examples/react/basic/vite.config.ts diff --git a/examples/react/default-query-function/index.html b/examples/react/default-query-function/index.html index 3365e7fa58..07e1d099d2 100644 --- a/examples/react/default-query-function/index.html +++ b/examples/react/default-query-function/index.html @@ -11,6 +11,6 @@
- + diff --git a/examples/react/default-query-function/package.json b/examples/react/default-query-function/package.json index d41014bc36..6bc0405b1a 100644 --- a/examples/react/default-query-function/package.json +++ b/examples/react/default-query-function/package.json @@ -8,26 +8,14 @@ "preview": "vite preview" }, "dependencies": { - "@tanstack/react-query": "^5.40.1", - "@tanstack/react-query-devtools": "^5.40.1", - "axios": "^1.6.8", + "@tanstack/react-query": "^5.51.11", + "@tanstack/react-query-devtools": "^5.51.11", "react": "19.0.0-rc-4c2e457c7c-20240522", "react-dom": "19.0.0-rc-4c2e457c7c-20240522" }, "devDependencies": { - "@vitejs/plugin-react": "^4.2.1", - "vite": "^5.2.11" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] + "@vitejs/plugin-react": "^4.3.1", + "typescript": "5.3.3", + "vite": "^5.3.3" } } diff --git a/examples/react/default-query-function/src/index.jsx b/examples/react/default-query-function/src/index.tsx similarity index 81% rename from examples/react/default-query-function/src/index.jsx rename to examples/react/default-query-function/src/index.tsx index 5b494df68e..72a45b7f3c 100644 --- a/examples/react/default-query-function/src/index.jsx +++ b/examples/react/default-query-function/src/index.tsx @@ -1,21 +1,26 @@ -/* eslint-disable jsx-a11y/anchor-is-valid */ import React from 'react' import ReactDOM from 'react-dom/client' -import axios from 'axios' import { - useQuery, - useQueryClient, QueryClient, QueryClientProvider, + useQuery, + useQueryClient, } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' +import type { QueryKey } from '@tanstack/react-query' + +type Post = { + id: number + title: string + body: string +} // Define a default query function that will receive the query key -const defaultQueryFn = async ({ queryKey }) => { - const { data } = await axios.get( +const defaultQueryFn = async ({ queryKey }: { queryKey: QueryKey }) => { + const response = await fetch( `https://jsonplaceholder.typicode.com${queryKey[0]}`, ) - return data + return await response.json() } // provide the default query function to your app via the query client @@ -52,11 +57,15 @@ function App() { ) } -function Posts({ setPostId }) { +function Posts({ + setPostId, +}: { + setPostId: React.Dispatch> +}) { const queryClient = useQueryClient() // All you have to do now is pass a key! - const { status, data, error, isFetching } = useQuery({ + const { status, data, error, isFetching } = useQuery>({ queryKey: ['/posts'], }) @@ -79,7 +88,7 @@ function Posts({ setPostId }) { style={ // We can use the queryCache here to show bold links for // ones that are cached - queryClient.getQueryData(['post', post.id]) + queryClient.getQueryData([`/posts/${post.id}`]) ? { fontWeight: 'bold', color: 'green', @@ -100,9 +109,15 @@ function Posts({ setPostId }) { ) } -function Post({ postId, setPostId }) { +function Post({ + postId, + setPostId, +}: { + postId: number + setPostId: React.Dispatch> +}) { // You can even leave out the queryFn and just go straight into options - const { status, data, error, isFetching } = useQuery({ + const { status, data, error, isFetching } = useQuery({ queryKey: [`/posts/${postId}`], enabled: !!postId, }) @@ -131,5 +146,5 @@ function Post({ postId, setPostId }) { ) } -const rootElement = document.getElementById('root') +const rootElement = document.getElementById('root') as HTMLElement ReactDOM.createRoot(rootElement).render() diff --git a/examples/react/default-query-function/tsconfig.json b/examples/react/default-query-function/tsconfig.json new file mode 100644 index 0000000000..23a8707ef4 --- /dev/null +++ b/examples/react/default-query-function/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "Bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src", "eslint.config.js"] +} diff --git a/examples/react/default-query-function/vite.config.ts b/examples/react/default-query-function/vite.config.ts new file mode 100644 index 0000000000..9ffcc67574 --- /dev/null +++ b/examples/react/default-query-function/vite.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +export default defineConfig({ + plugins: [react()], +}) diff --git a/examples/react/infinite-query-with-max-pages/next-env.d.ts b/examples/react/infinite-query-with-max-pages/next-env.d.ts new file mode 100644 index 0000000000..4f11a03dc6 --- /dev/null +++ b/examples/react/infinite-query-with-max-pages/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/examples/react/infinite-query-with-max-pages/next.config.js b/examples/react/infinite-query-with-max-pages/next.config.js index 954704d28c..033754658c 100644 --- a/examples/react/infinite-query-with-max-pages/next.config.js +++ b/examples/react/infinite-query-with-max-pages/next.config.js @@ -1,5 +1,13 @@ -module.exports = { +// @ts-check + +/** @type {import('next').NextConfig} */ +const nextConfig = { eslint: { ignoreDuringBuilds: true, }, + typescript: { + ignoreBuildErrors: true, + }, } + +export default nextConfig diff --git a/examples/react/infinite-query-with-max-pages/package.json b/examples/react/infinite-query-with-max-pages/package.json index 5e8588b162..d7908d6b90 100644 --- a/examples/react/infinite-query-with-max-pages/package.json +++ b/examples/react/infinite-query-with-max-pages/package.json @@ -1,19 +1,22 @@ { "name": "@tanstack/query-example-react-infinite-query-with-max-pages", "private": true, + "type": "module", "scripts": { "dev": "next", "build": "next build", "start": "next start" }, "dependencies": { - "@tanstack/react-query": "^5.40.1", - "@tanstack/react-query-devtools": "^5.40.1", - "axios": "^1.6.8", - "isomorphic-unfetch": "4.0.2", - "next": "^14.0.0", + "@tanstack/react-query": "^5.51.11", + "@tanstack/react-query-devtools": "^5.51.11", + "next": "^14.2.4", "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-intersection-observer": "^8.34.0" + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.2.79", + "@types/react-dom": "^18.2.25", + "typescript": "5.3.3" } } diff --git a/examples/react/infinite-query-with-max-pages/src/pages/api/projects.js b/examples/react/infinite-query-with-max-pages/src/pages/api/projects.ts similarity index 78% rename from examples/react/infinite-query-with-max-pages/src/pages/api/projects.js rename to examples/react/infinite-query-with-max-pages/src/pages/api/projects.ts index a13fbee1aa..29b5228484 100644 --- a/examples/react/infinite-query-with-max-pages/src/pages/api/projects.js +++ b/examples/react/infinite-query-with-max-pages/src/pages/api/projects.ts @@ -1,5 +1,6 @@ -// an endpoint for getting projects data -export default (req, res) => { +import type { NextApiRequest, NextApiResponse } from 'next' + +export default (req: NextApiRequest, res: NextApiResponse) => { const cursor = parseInt(req.query.cursor) || 0 const pageSize = 4 diff --git a/examples/react/infinite-query-with-max-pages/src/pages/index.js b/examples/react/infinite-query-with-max-pages/src/pages/index.tsx similarity index 95% rename from examples/react/infinite-query-with-max-pages/src/pages/index.js rename to examples/react/infinite-query-with-max-pages/src/pages/index.tsx index ad7e6b6858..29fac3d44a 100644 --- a/examples/react/infinite-query-with-max-pages/src/pages/index.js +++ b/examples/react/infinite-query-with-max-pages/src/pages/index.tsx @@ -1,9 +1,8 @@ import React from 'react' -import axios from 'axios' import { - useInfiniteQuery, QueryClient, QueryClientProvider, + useInfiniteQuery, } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' @@ -32,8 +31,8 @@ function Example() { } = useInfiniteQuery({ queryKey: ['projects'], queryFn: async ({ pageParam }) => { - const res = await axios.get('/api/projects?cursor=' + pageParam) - return res.data + const response = await fetch(`/api/projects?cursor=${pageParam}`) + return await response.json() }, initialPageParam: 0, getPreviousPageParam: (firstPage) => firstPage.previousId ?? undefined, diff --git a/examples/react/infinite-query-with-max-pages/tsconfig.json b/examples/react/infinite-query-with-max-pages/tsconfig.json new file mode 100644 index 0000000000..9575d0eab5 --- /dev/null +++ b/examples/react/infinite-query-with-max-pages/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "Bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +} diff --git a/examples/react/load-more-infinite-scroll/next-env.d.ts b/examples/react/load-more-infinite-scroll/next-env.d.ts new file mode 100644 index 0000000000..4f11a03dc6 --- /dev/null +++ b/examples/react/load-more-infinite-scroll/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/examples/react/load-more-infinite-scroll/next.config.js b/examples/react/load-more-infinite-scroll/next.config.js index 954704d28c..033754658c 100644 --- a/examples/react/load-more-infinite-scroll/next.config.js +++ b/examples/react/load-more-infinite-scroll/next.config.js @@ -1,5 +1,13 @@ -module.exports = { +// @ts-check + +/** @type {import('next').NextConfig} */ +const nextConfig = { eslint: { ignoreDuringBuilds: true, }, + typescript: { + ignoreBuildErrors: true, + }, } + +export default nextConfig diff --git a/examples/react/load-more-infinite-scroll/package.json b/examples/react/load-more-infinite-scroll/package.json index 5166f6cc7b..317b9265ab 100644 --- a/examples/react/load-more-infinite-scroll/package.json +++ b/examples/react/load-more-infinite-scroll/package.json @@ -1,19 +1,23 @@ { "name": "@tanstack/query-example-react-load-more-infinite-scroll", "private": true, + "type": "module", "scripts": { "dev": "next", "build": "next build", "start": "next start" }, "dependencies": { - "@tanstack/react-query": "^5.40.1", - "@tanstack/react-query-devtools": "^5.40.1", - "axios": "^1.6.8", - "isomorphic-unfetch": "4.0.2", - "next": "^14.0.0", + "@tanstack/react-query": "^5.51.11", + "@tanstack/react-query-devtools": "^5.51.11", + "next": "^14.2.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-intersection-observer": "^8.34.0" + }, + "devDependencies": { + "@types/react": "^18.2.79", + "@types/react-dom": "^18.2.25", + "typescript": "5.3.3" } } diff --git a/examples/react/load-more-infinite-scroll/src/pages/about.js b/examples/react/load-more-infinite-scroll/src/pages/about.tsx similarity index 100% rename from examples/react/load-more-infinite-scroll/src/pages/about.js rename to examples/react/load-more-infinite-scroll/src/pages/about.tsx diff --git a/examples/react/load-more-infinite-scroll/src/pages/api/projects.js b/examples/react/load-more-infinite-scroll/src/pages/api/projects.ts similarity index 78% rename from examples/react/load-more-infinite-scroll/src/pages/api/projects.js rename to examples/react/load-more-infinite-scroll/src/pages/api/projects.ts index 03492c0a15..493a453a96 100644 --- a/examples/react/load-more-infinite-scroll/src/pages/api/projects.js +++ b/examples/react/load-more-infinite-scroll/src/pages/api/projects.ts @@ -1,5 +1,6 @@ -// an endpoint for getting projects data -export default (req, res) => { +import type { NextApiRequest, NextApiResponse } from 'next' + +export default (req: NextApiRequest, res: NextApiResponse) => { const cursor = parseInt(req.query.cursor) || 0 const pageSize = 5 diff --git a/examples/react/load-more-infinite-scroll/src/pages/index.js b/examples/react/load-more-infinite-scroll/src/pages/index.tsx similarity index 87% rename from examples/react/load-more-infinite-scroll/src/pages/index.js rename to examples/react/load-more-infinite-scroll/src/pages/index.tsx index 1635230ca5..9aa6742d15 100644 --- a/examples/react/load-more-infinite-scroll/src/pages/index.js +++ b/examples/react/load-more-infinite-scroll/src/pages/index.tsx @@ -1,6 +1,5 @@ import React from 'react' import Link from 'next/link' -import axios from 'axios' import { useInView } from 'react-intersection-observer' import { useInfiniteQuery, @@ -35,13 +34,19 @@ function Example() { hasPreviousPage, } = useInfiniteQuery({ queryKey: ['projects'], - queryFn: async ({ pageParam }) => { - const res = await axios.get('/api/projects?cursor=' + pageParam) - return res.data + queryFn: async ({ + pageParam, + }): Promise<{ + data: Array<{ name: string; id: number }> + previousId: number + nextId: number + }> => { + const response = await fetch(`/api/projects?cursor=${pageParam}`) + return await response.json() }, initialPageParam: 0, - getPreviousPageParam: (firstPage) => firstPage.previousId ?? undefined, - getNextPageParam: (lastPage) => lastPage.nextId ?? undefined, + getPreviousPageParam: (firstPage) => firstPage.previousId, + getNextPageParam: (lastPage) => lastPage.nextId, }) React.useEffect(() => { diff --git a/examples/react/load-more-infinite-scroll/tsconfig.json b/examples/react/load-more-infinite-scroll/tsconfig.json new file mode 100644 index 0000000000..9575d0eab5 --- /dev/null +++ b/examples/react/load-more-infinite-scroll/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "Bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +} diff --git a/examples/react/nextjs-app-prefetching/app/get-query-client.ts b/examples/react/nextjs-app-prefetching/app/get-query-client.ts index af725f2a96..9ca1cc407e 100644 --- a/examples/react/nextjs-app-prefetching/app/get-query-client.ts +++ b/examples/react/nextjs-app-prefetching/app/get-query-client.ts @@ -1,4 +1,8 @@ -import { QueryClient, defaultShouldDehydrateQuery } from '@tanstack/react-query' +import { + QueryClient, + defaultShouldDehydrateQuery, + isServer, +} from '@tanstack/react-query' function makeQueryClient() { return new QueryClient({ @@ -19,7 +23,7 @@ function makeQueryClient() { let browserQueryClient: QueryClient | undefined = undefined export function getQueryClient() { - if (typeof window === 'undefined') { + if (isServer) { // Server: always make a new query client return makeQueryClient() } else { diff --git a/examples/react/nextjs-app-prefetching/next.config.js b/examples/react/nextjs-app-prefetching/next.config.js index 8d2a9bf37a..033754658c 100644 --- a/examples/react/nextjs-app-prefetching/next.config.js +++ b/examples/react/nextjs-app-prefetching/next.config.js @@ -1,8 +1,13 @@ +// @ts-check + /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, + typescript: { + ignoreBuildErrors: true, + }, } -module.exports = nextConfig +export default nextConfig diff --git a/examples/react/nextjs-app-prefetching/package.json b/examples/react/nextjs-app-prefetching/package.json index 8e6b2ec1fa..fd0387bc43 100644 --- a/examples/react/nextjs-app-prefetching/package.json +++ b/examples/react/nextjs-app-prefetching/package.json @@ -1,6 +1,7 @@ { - "name": "nextjs-app-prefetching", + "name": "@tanstack/query-example-react-nextjs-app-prefetching", "private": true, + "type": "module", "scripts": { "dev": "next dev", "build": "next build", @@ -8,14 +9,13 @@ "test:types": "tsc" }, "dependencies": { - "@tanstack/react-query": "^5.40.1", - "@tanstack/react-query-devtools": "^5.40.1", + "@tanstack/react-query": "^5.51.11", + "@tanstack/react-query-devtools": "^5.51.11", "next": "^15.0.0-rc.0", - "react": "^19.0.0-rc-4c2e457c7c-20240522", - "react-dom": "^19.0.0-rc-4c2e457c7c-20240522" + "react": "19.0.0-rc-4c2e457c7c-20240522", + "react-dom": "19.0.0-rc-4c2e457c7c-20240522" }, "devDependencies": { - "@types/node": "^20.12.12", "@types/react": "npm:types-react@rc", "@types/react-dom": "npm:types-react-dom@rc", "typescript": "5.3.3" diff --git a/examples/react/nextjs-app-prefetching/tsconfig.json b/examples/react/nextjs-app-prefetching/tsconfig.json index e3ea9649f2..44eb6012cc 100644 --- a/examples/react/nextjs-app-prefetching/tsconfig.json +++ b/examples/react/nextjs-app-prefetching/tsconfig.json @@ -9,7 +9,7 @@ "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "bundler", + "moduleResolution": "Bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", diff --git a/examples/react/nextjs-suspense-streaming/next.config.js b/examples/react/nextjs-suspense-streaming/next.config.js index 8d249b795b..591cd313c3 100644 --- a/examples/react/nextjs-suspense-streaming/next.config.js +++ b/examples/react/nextjs-suspense-streaming/next.config.js @@ -1,8 +1,13 @@ +// @ts-check + /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, + typescript: { + ignoreBuildErrors: true, + }, webpack: (config) => { if (config.name === 'server') config.optimization.concatenateModules = false @@ -10,4 +15,4 @@ const nextConfig = { }, } -module.exports = nextConfig +export default nextConfig diff --git a/examples/react/nextjs-suspense-streaming/package.json b/examples/react/nextjs-suspense-streaming/package.json index c770842dbf..c50fdd0a0f 100644 --- a/examples/react/nextjs-suspense-streaming/package.json +++ b/examples/react/nextjs-suspense-streaming/package.json @@ -1,6 +1,7 @@ { "name": "@tanstack/query-example-nextjs-suspense-streaming", "private": true, + "type": "module", "scripts": { "dev": "next dev", "build": "next build", @@ -8,16 +9,14 @@ "test:types": "tsc" }, "dependencies": { - "@tanstack/react-query": "^5.40.1", - "@tanstack/react-query-devtools": "^5.40.1", - "@tanstack/react-query-next-experimental": "^5.40.1", - "next": "^14.0.0", + "@tanstack/react-query": "^5.51.11", + "@tanstack/react-query-devtools": "^5.51.11", + "@tanstack/react-query-next-experimental": "^5.51.11", + "next": "^14.2.4", "react": "^18.2.0", - "react-dom": "^18.2.0", - "superjson": "^2.2.1" + "react-dom": "^18.2.0" }, "devDependencies": { - "@types/node": "^20.12.12", "@types/react": "^18.2.79", "typescript": "5.3.3" } diff --git a/examples/react/nextjs-suspense-streaming/src/app/page.tsx b/examples/react/nextjs-suspense-streaming/src/app/page.tsx index 50fa21bfae..4c17668cbc 100644 --- a/examples/react/nextjs-suspense-streaming/src/app/page.tsx +++ b/examples/react/nextjs-suspense-streaming/src/app/page.tsx @@ -1,11 +1,11 @@ 'use client' -import { useSuspenseQuery } from '@tanstack/react-query' +import { isServer, useSuspenseQuery } from '@tanstack/react-query' import { Suspense } from 'react' export const runtime = 'edge' // 'nodejs' (default) | 'edge' function getBaseURL() { - if (typeof window !== 'undefined') { + if (!isServer) { return '' } if (process.env.VERCEL_URL) { diff --git a/examples/react/nextjs-suspense-streaming/src/app/providers.tsx b/examples/react/nextjs-suspense-streaming/src/app/providers.tsx index fb0f5a24e9..b4990842e5 100644 --- a/examples/react/nextjs-suspense-streaming/src/app/providers.tsx +++ b/examples/react/nextjs-suspense-streaming/src/app/providers.tsx @@ -1,6 +1,10 @@ 'use client' -import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { + QueryClient, + QueryClientProvider, + isServer, +} from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' import * as React from 'react' import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental' @@ -18,7 +22,7 @@ function makeQueryClient() { let browserQueryClient: QueryClient | undefined = undefined function getQueryClient() { - if (typeof window === 'undefined') { + if (isServer) { return makeQueryClient() } else { if (!browserQueryClient) browserQueryClient = makeQueryClient() diff --git a/examples/react/nextjs/next-env.d.ts b/examples/react/nextjs/next-env.d.ts new file mode 100644 index 0000000000..4f11a03dc6 --- /dev/null +++ b/examples/react/nextjs/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/examples/react/nextjs/next.config.js b/examples/react/nextjs/next.config.js index 954704d28c..033754658c 100644 --- a/examples/react/nextjs/next.config.js +++ b/examples/react/nextjs/next.config.js @@ -1,5 +1,13 @@ -module.exports = { +// @ts-check + +/** @type {import('next').NextConfig} */ +const nextConfig = { eslint: { ignoreDuringBuilds: true, }, + typescript: { + ignoreBuildErrors: true, + }, } + +export default nextConfig diff --git a/examples/react/nextjs/package.json b/examples/react/nextjs/package.json index 250aa717a1..34b4006e2c 100644 --- a/examples/react/nextjs/package.json +++ b/examples/react/nextjs/package.json @@ -1,19 +1,22 @@ { "name": "@tanstack/query-example-react-nextjs", "private": true, + "type": "module", "scripts": { "dev": "next", "build": "next build", "start": "next start" }, "dependencies": { - "@tanstack/react-query": "^5.40.1", - "@tanstack/react-query-devtools": "^5.40.1", - "ky": "^1.2.4", - "next": "^14.0.0", + "@tanstack/react-query": "^5.51.11", + "@tanstack/react-query-devtools": "^5.51.11", + "next": "^14.2.4", "react": "^18.2.0", - "react-dom": "^18.2.0", - "resolve-from": "^5.0.0", - "web-streams-polyfill": "^4.0.0" + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.2.79", + "@types/react-dom": "^18.2.25", + "typescript": "5.3.3" } } diff --git a/examples/react/nextjs/src/components/Header/index.js b/examples/react/nextjs/src/components/Header.tsx similarity index 100% rename from examples/react/nextjs/src/components/Header/index.js rename to examples/react/nextjs/src/components/Header.tsx diff --git a/examples/react/nextjs/src/components/InfoBox/index.js b/examples/react/nextjs/src/components/InfoBox.tsx similarity index 83% rename from examples/react/nextjs/src/components/InfoBox/index.js rename to examples/react/nextjs/src/components/InfoBox.tsx index b0ff42f7d3..4bc1ecbbea 100644 --- a/examples/react/nextjs/src/components/InfoBox/index.js +++ b/examples/react/nextjs/src/components/InfoBox.tsx @@ -1,6 +1,6 @@ import React from 'react' -const InfoBox = ({ children }) => ( +const InfoBox = ({ children }: { children: React.ReactNode }) => (