snapshot of https://github.com/TanStack/query.git (main, 2026-09-16; blobs > 131072B omitted)
This commit is contained in:
42
integrations/angular-cli-20/.gitignore
vendored
Normal file
42
integrations/angular-cli-20/.gitignore
vendored
Normal file
@@ -0,0 +1,42 @@
|
||||
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
|
||||
|
||||
# Compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
/bazel-out
|
||||
|
||||
# Node
|
||||
/node_modules
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# IDEs and editors
|
||||
.idea/
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# Visual Studio Code
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# Miscellaneous
|
||||
/.angular/cache
|
||||
.sass-cache/
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
4
integrations/angular-cli-20/.vscode/extensions.json
vendored
Normal file
4
integrations/angular-cli-20/.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
|
||||
"recommendations": ["angular.ng-template"]
|
||||
}
|
||||
13
integrations/angular-cli-20/.vscode/launch.json
vendored
Normal file
13
integrations/angular-cli-20/.vscode/launch.json
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "ng serve",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"preLaunchTask": "npm: start",
|
||||
"url": "http://localhost:4200/"
|
||||
}
|
||||
]
|
||||
}
|
||||
24
integrations/angular-cli-20/.vscode/tasks.json
vendored
Normal file
24
integrations/angular-cli-20/.vscode/tasks.json
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
|
||||
"version": "2.0.0",
|
||||
"tasks": [
|
||||
{
|
||||
"type": "npm",
|
||||
"script": "start",
|
||||
"isBackground": true,
|
||||
"problemMatcher": {
|
||||
"owner": "typescript",
|
||||
"pattern": "$tsc",
|
||||
"background": {
|
||||
"activeOnStart": true,
|
||||
"beginsPattern": {
|
||||
"regexp": "(.*?)"
|
||||
},
|
||||
"endsPattern": {
|
||||
"regexp": "bundle generation complete"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
59
integrations/angular-cli-20/README.md
Normal file
59
integrations/angular-cli-20/README.md
Normal file
@@ -0,0 +1,59 @@
|
||||
# AngularCli20
|
||||
|
||||
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.0.0-rc.2.
|
||||
|
||||
## Development server
|
||||
|
||||
To start a local development server, run:
|
||||
|
||||
```bash
|
||||
ng serve
|
||||
```
|
||||
|
||||
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
||||
|
||||
```bash
|
||||
ng generate component component-name
|
||||
```
|
||||
|
||||
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
||||
|
||||
```bash
|
||||
ng generate --help
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To build the project run:
|
||||
|
||||
```bash
|
||||
ng build
|
||||
```
|
||||
|
||||
This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
||||
|
||||
```bash
|
||||
ng test
|
||||
```
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
For end-to-end (e2e) testing, run:
|
||||
|
||||
```bash
|
||||
ng e2e
|
||||
```
|
||||
|
||||
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
||||
|
||||
## Additional Resources
|
||||
|
||||
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
||||
102
integrations/angular-cli-20/angular.json
Normal file
102
integrations/angular-cli-20/angular.json
Normal file
@@ -0,0 +1,102 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"cli": {
|
||||
"packageManager": "pnpm",
|
||||
"analytics": false,
|
||||
"cache": {
|
||||
"enabled": false
|
||||
}
|
||||
},
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"angular-cli-20": {
|
||||
"projectType": "application",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"inlineTemplate": true,
|
||||
"inlineStyle": true,
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:class": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:directive": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:guard": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:interceptor": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:pipe": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:resolver": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:service": {
|
||||
"skipTests": true
|
||||
}
|
||||
},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular/build:application",
|
||||
"options": {
|
||||
"browser": "src/main.ts",
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"assets": [
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "public"
|
||||
}
|
||||
],
|
||||
"styles": ["src/styles.css"]
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kB",
|
||||
"maximumError": "1MB"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "4kB",
|
||||
"maximumError": "8kB"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"optimization": false,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular/build:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "angular-cli-20:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "angular-cli-20:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular/build:extract-i18n"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
28
integrations/angular-cli-20/package.json
Normal file
28
integrations/angular-cli-20/package.json
Normal file
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "angular-cli-20",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"watch": "ng build --watch --configuration development"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/common": "^20.0.0",
|
||||
"@angular/compiler": "^20.0.0",
|
||||
"@angular/core": "^20.0.0",
|
||||
"@angular/forms": "^20.0.0",
|
||||
"@angular/platform-browser": "^20.0.0",
|
||||
"@angular/router": "^20.0.0",
|
||||
"@tanstack/angular-query-experimental": "^5.102.8",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.15.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/build": "^20.0.0",
|
||||
"@angular/cli": "^20.0.0",
|
||||
"@angular/compiler-cli": "^20.0.0",
|
||||
"typescript": "~5.8.2"
|
||||
}
|
||||
}
|
||||
BIN
integrations/angular-cli-20/public/favicon.ico
Normal file
BIN
integrations/angular-cli-20/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
17
integrations/angular-cli-20/src/app/app.config.ts
Normal file
17
integrations/angular-cli-20/src/app/app.config.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import {
|
||||
ApplicationConfig,
|
||||
provideBrowserGlobalErrorListeners,
|
||||
provideZonelessChangeDetection,
|
||||
} from '@angular/core'
|
||||
import {
|
||||
provideTanStackQuery,
|
||||
QueryClient,
|
||||
} from '@tanstack/angular-query-experimental'
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideBrowserGlobalErrorListeners(),
|
||||
provideZonelessChangeDetection(),
|
||||
provideTanStackQuery(new QueryClient()),
|
||||
],
|
||||
}
|
||||
26
integrations/angular-cli-20/src/app/app.ts
Normal file
26
integrations/angular-cli-20/src/app/app.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import { Component } from '@angular/core'
|
||||
import { injectQuery } from '@tanstack/angular-query-experimental'
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
@if (query.isPending()) {
|
||||
<div>Loading...</div>
|
||||
}
|
||||
@if (query.isError()) {
|
||||
<div>An error has occurred!</div>
|
||||
}
|
||||
@if (query.isSuccess()) {
|
||||
<div>{{ query.data() }}</div>
|
||||
}
|
||||
`,
|
||||
})
|
||||
export class App {
|
||||
query = injectQuery(() => ({
|
||||
queryKey: ['test'],
|
||||
queryFn: async () => {
|
||||
await new Promise((r) => setTimeout(r, 1000))
|
||||
return 'Success'
|
||||
},
|
||||
}))
|
||||
}
|
||||
13
integrations/angular-cli-20/src/index.html
Normal file
13
integrations/angular-cli-20/src/index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>AngularCli20</title>
|
||||
<base href="/" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
5
integrations/angular-cli-20/src/main.ts
Normal file
5
integrations/angular-cli-20/src/main.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import { bootstrapApplication } from '@angular/platform-browser'
|
||||
import { appConfig } from './app/app.config'
|
||||
import { App } from './app/app'
|
||||
|
||||
bootstrapApplication(App, appConfig).catch((err) => console.error(err))
|
||||
1
integrations/angular-cli-20/src/styles.css
Normal file
1
integrations/angular-cli-20/src/styles.css
Normal file
@@ -0,0 +1 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
11
integrations/angular-cli-20/tsconfig.app.json
Normal file
11
integrations/angular-cli-20/tsconfig.app.json
Normal file
@@ -0,0 +1,11 @@
|
||||
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": []
|
||||
},
|
||||
"include": ["src/**/*.ts"],
|
||||
"exclude": ["src/**/*.spec.ts"]
|
||||
}
|
||||
31
integrations/angular-cli-20/tsconfig.json
Normal file
31
integrations/angular-cli-20/tsconfig.json
Normal file
@@ -0,0 +1,31 @@
|
||||
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"skipLibCheck": true,
|
||||
"isolatedModules": true,
|
||||
"experimentalDecorators": true,
|
||||
"importHelpers": true,
|
||||
"target": "ES2022",
|
||||
"module": "preserve"
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"typeCheckHostBindings": true,
|
||||
"strictTemplates": true
|
||||
},
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
13
integrations/lit-vite/index.html
Normal file
13
integrations/lit-vite/index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Vite + Lit</title>
|
||||
</head>
|
||||
<body>
|
||||
<lit-query-provider>
|
||||
<lit-query-app></lit-query-app>
|
||||
</lit-query-provider>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
17
integrations/lit-vite/package.json
Normal file
17
integrations/lit-vite/package.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"name": "lit-vite",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "tsc --noEmit && vite build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tanstack/lit-query": "workspace:*",
|
||||
"@tanstack/query-core": "workspace:*",
|
||||
"lit": "^3.3.1",
|
||||
"vite": "^6.4.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "5.8.3"
|
||||
}
|
||||
}
|
||||
56
integrations/lit-vite/src/main.ts
Normal file
56
integrations/lit-vite/src/main.ts
Normal file
@@ -0,0 +1,56 @@
|
||||
import { LitElement, html } from 'lit'
|
||||
import {
|
||||
QueryClient,
|
||||
QueryClientProvider,
|
||||
createQueryController,
|
||||
} from '@tanstack/lit-query'
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
retry: false,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
class LitQueryProvider extends QueryClientProvider {
|
||||
constructor() {
|
||||
super()
|
||||
this.client = queryClient
|
||||
}
|
||||
|
||||
protected override createRenderRoot(): HTMLElement | DocumentFragment {
|
||||
return this
|
||||
}
|
||||
}
|
||||
|
||||
class LitQueryApp extends LitElement {
|
||||
private readonly query = createQueryController(this, {
|
||||
queryKey: ['test'],
|
||||
queryFn: async () => {
|
||||
await new Promise((resolve) => setTimeout(resolve, 100))
|
||||
return 'Success'
|
||||
},
|
||||
})
|
||||
|
||||
protected override createRenderRoot(): HTMLElement | DocumentFragment {
|
||||
return this
|
||||
}
|
||||
|
||||
render() {
|
||||
const query = this.query()
|
||||
|
||||
if (query.isPending) {
|
||||
return html`<div>Loading...</div>`
|
||||
}
|
||||
|
||||
if (query.isError) {
|
||||
return html`<div>An error has occurred!</div>`
|
||||
}
|
||||
|
||||
return html`<div>${query.data}</div>`
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('lit-query-provider', LitQueryProvider)
|
||||
customElements.define('lit-query-app', LitQueryApp)
|
||||
14
integrations/lit-vite/tsconfig.json
Normal file
14
integrations/lit-vite/tsconfig.json
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"lib": ["ES2022", "DOM"],
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"isolatedModules": true,
|
||||
"skipLibCheck": true,
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"include": ["src/**/*.ts"]
|
||||
}
|
||||
3
integrations/lit-vite/vite.config.ts
Normal file
3
integrations/lit-vite/vite.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
export default defineConfig({})
|
||||
9
integrations/react-next-14/.eslintrc.cjs
Normal file
9
integrations/react-next-14/.eslintrc.cjs
Normal file
@@ -0,0 +1,9 @@
|
||||
/** @type {import('eslint').Linter.Config} */
|
||||
module.exports = {
|
||||
extends: ['plugin:react/jsx-runtime', 'plugin:react-hooks/recommended'],
|
||||
settings: {
|
||||
react: {
|
||||
version: 'detect',
|
||||
},
|
||||
},
|
||||
}
|
||||
34
integrations/react-next-14/.gitignore
vendored
Normal file
34
integrations/react-next-14/.gitignore
vendored
Normal file
@@ -0,0 +1,34 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
34
integrations/react-next-14/README.md
Normal file
34
integrations/react-next-14/README.md
Normal file
@@ -0,0 +1,34 @@
|
||||
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
||||
24
integrations/react-next-14/app/client-component.tsx
Normal file
24
integrations/react-next-14/app/client-component.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
|
||||
export function ClientComponent() {
|
||||
const query = useQuery({
|
||||
queryKey: ['test'],
|
||||
queryFn: async () => {
|
||||
await new Promise((r) => setTimeout(r, 1000))
|
||||
return 'Success'
|
||||
},
|
||||
})
|
||||
|
||||
if (query.isPending) {
|
||||
return <div>Loading...</div>
|
||||
}
|
||||
|
||||
if (query.isError) {
|
||||
return <div>An error has occurred!</div>
|
||||
}
|
||||
|
||||
return <div>{query.data}</div>
|
||||
}
|
||||
BIN
integrations/react-next-14/app/favicon.ico
Normal file
BIN
integrations/react-next-14/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
22
integrations/react-next-14/app/layout.tsx
Normal file
22
integrations/react-next-14/app/layout.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import React from 'react'
|
||||
import Providers from './providers'
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Create Next App',
|
||||
description: 'Generated by create next app',
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
<Providers>{children}</Providers>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
16
integrations/react-next-14/app/page.tsx
Normal file
16
integrations/react-next-14/app/page.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import React from 'react'
|
||||
import { queryOptions } from '@tanstack/react-query'
|
||||
import { ClientComponent } from './client-component'
|
||||
|
||||
const options = queryOptions({
|
||||
queryKey: ['foo'],
|
||||
})
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main>
|
||||
<ClientComponent />
|
||||
Key: {JSON.stringify(options.queryKey)}
|
||||
</main>
|
||||
)
|
||||
}
|
||||
15
integrations/react-next-14/app/providers.tsx
Normal file
15
integrations/react-next-14/app/providers.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
'use client'
|
||||
import * as React from 'react'
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
|
||||
|
||||
export default function Providers({ children }: { children: React.ReactNode }) {
|
||||
const [queryClient] = React.useState(() => new QueryClient())
|
||||
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
{children}
|
||||
<ReactQueryDevtools />
|
||||
</QueryClientProvider>
|
||||
)
|
||||
}
|
||||
11
integrations/react-next-14/next.config.js
Normal file
11
integrations/react-next-14/next.config.js
Normal file
@@ -0,0 +1,11 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
eslint: {
|
||||
ignoreDuringBuilds: true,
|
||||
},
|
||||
typescript: {
|
||||
ignoreBuildErrors: true,
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = nextConfig
|
||||
18
integrations/react-next-14/package.json
Normal file
18
integrations/react-next-14/package.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "react-next-14",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "next build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tanstack/react-query": "workspace:*",
|
||||
"@tanstack/react-query-devtools": "workspace:*",
|
||||
"next": "^14.2.33",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.79",
|
||||
"@types/react-dom": "^18.2.25"
|
||||
}
|
||||
}
|
||||
34
integrations/react-next-14/tsconfig.json
Normal file
34
integrations/react-next-14/tsconfig.json
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES5",
|
||||
"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,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts",
|
||||
".eslintrc.cjs"
|
||||
],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
9
integrations/react-next-15/.eslintrc.cjs
Normal file
9
integrations/react-next-15/.eslintrc.cjs
Normal file
@@ -0,0 +1,9 @@
|
||||
/** @type {import('eslint').Linter.Config} */
|
||||
module.exports = {
|
||||
extends: ['plugin:react/jsx-runtime', 'plugin:react-hooks/recommended'],
|
||||
settings: {
|
||||
react: {
|
||||
version: 'detect',
|
||||
},
|
||||
},
|
||||
}
|
||||
34
integrations/react-next-15/.gitignore
vendored
Normal file
34
integrations/react-next-15/.gitignore
vendored
Normal file
@@ -0,0 +1,34 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
34
integrations/react-next-15/README.md
Normal file
34
integrations/react-next-15/README.md
Normal file
@@ -0,0 +1,34 @@
|
||||
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
||||
11
integrations/react-next-15/app/_action.ts
Normal file
11
integrations/react-next-15/app/_action.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
'use server'
|
||||
|
||||
import { revalidatePath } from 'next/cache'
|
||||
import { countRef } from './make-query-client'
|
||||
|
||||
export async function queryExampleAction() {
|
||||
await Promise.resolve()
|
||||
countRef.current++
|
||||
revalidatePath('/', 'page')
|
||||
return undefined
|
||||
}
|
||||
36
integrations/react-next-15/app/client-component.tsx
Normal file
36
integrations/react-next-15/app/client-component.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Temporal } from '@js-temporal/polyfill'
|
||||
|
||||
export function ClientComponent() {
|
||||
const query = useQuery({
|
||||
queryKey: ['data'],
|
||||
queryFn: async () => {
|
||||
const { count } = await (
|
||||
await fetch('http://localhost:3000/count')
|
||||
).json()
|
||||
|
||||
return {
|
||||
text: 'data from client',
|
||||
date: Temporal.PlainDate.from('2023-01-01'),
|
||||
count,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
if (query.isPending) {
|
||||
return <div>Loading...</div>
|
||||
}
|
||||
|
||||
if (query.isError) {
|
||||
return <div>An error has occurred!</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{query.data.text} - {query.data.date.toJSON()} - {query.data.count}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
5
integrations/react-next-15/app/count/route.ts
Normal file
5
integrations/react-next-15/app/count/route.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import { countRef } from '../make-query-client'
|
||||
|
||||
export const GET = () => {
|
||||
return Response.json({ count: countRef.current })
|
||||
}
|
||||
BIN
integrations/react-next-15/app/favicon.ico
Normal file
BIN
integrations/react-next-15/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
22
integrations/react-next-15/app/layout.tsx
Normal file
22
integrations/react-next-15/app/layout.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import React from 'react'
|
||||
import Providers from './providers'
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Create Next App',
|
||||
description: 'Generated by create next app',
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
<Providers>{children}</Providers>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
53
integrations/react-next-15/app/make-query-client.ts
Normal file
53
integrations/react-next-15/app/make-query-client.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import { Temporal } from '@js-temporal/polyfill'
|
||||
import { QueryClient, defaultShouldDehydrateQuery } from '@tanstack/react-query'
|
||||
import { createTson } from 'tupleson'
|
||||
import type { TsonType } from 'tupleson'
|
||||
|
||||
const plainDate = {
|
||||
deserialize: (v) => Temporal.PlainDate.from(v),
|
||||
key: 'PlainDate',
|
||||
serialize: (v) => v.toJSON(),
|
||||
test: (v) => v instanceof Temporal.PlainDate,
|
||||
} satisfies TsonType<Temporal.PlainDate, string>
|
||||
|
||||
export const countRef = {
|
||||
current: 0,
|
||||
}
|
||||
|
||||
export const tson = createTson({
|
||||
types: [plainDate],
|
||||
})
|
||||
|
||||
export function makeQueryClient() {
|
||||
return new QueryClient({
|
||||
defaultOptions: {
|
||||
hydrate: {
|
||||
/**
|
||||
* Called when the query is rebuilt from a prefetched
|
||||
* promise, before the query data is put into the cache.
|
||||
*/
|
||||
deserializeData: (data) => {
|
||||
return tson.deserialize(data)
|
||||
},
|
||||
},
|
||||
queries: {
|
||||
staleTime: 60 * 1000,
|
||||
},
|
||||
dehydrate: {
|
||||
serializeData: (data) => {
|
||||
return tson.serialize(data)
|
||||
},
|
||||
shouldDehydrateQuery: (query) => {
|
||||
return (
|
||||
defaultShouldDehydrateQuery(query) ||
|
||||
query.state.status === 'pending'
|
||||
)
|
||||
},
|
||||
shouldRedactErrors: (error) => {
|
||||
// Next.js automatically redacts errors for us
|
||||
return false
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
41
integrations/react-next-15/app/page.tsx
Normal file
41
integrations/react-next-15/app/page.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import { headers } from 'next/headers'
|
||||
import React from 'react'
|
||||
import { HydrationBoundary, dehydrate } from '@tanstack/react-query'
|
||||
import { Temporal } from '@js-temporal/polyfill'
|
||||
import { ClientComponent } from './client-component'
|
||||
import { makeQueryClient } from './make-query-client'
|
||||
import { queryExampleAction } from './_action'
|
||||
|
||||
export default function Home() {
|
||||
const queryClient = makeQueryClient()
|
||||
|
||||
queryClient.prefetchQuery({
|
||||
queryKey: ['data'],
|
||||
queryFn: async () => {
|
||||
const { count } = await (
|
||||
await fetch('http://localhost:3000/count', {
|
||||
headers: await headers(),
|
||||
})
|
||||
).json()
|
||||
|
||||
return {
|
||||
text: 'data from server',
|
||||
date: Temporal.PlainDate.from('2024-01-01'),
|
||||
count,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const state = dehydrate(queryClient)
|
||||
|
||||
return (
|
||||
<main>
|
||||
<HydrationBoundary state={state}>
|
||||
<ClientComponent />
|
||||
</HydrationBoundary>
|
||||
<form action={queryExampleAction}>
|
||||
<button type="submit">Increment</button>
|
||||
</form>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
39
integrations/react-next-15/app/providers.tsx
Normal file
39
integrations/react-next-15/app/providers.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
// In Next.js, this file would be called: app/providers.tsx
|
||||
'use client'
|
||||
|
||||
// Since QueryClientProvider relies on useContext under the hood, we have to put 'use client' on top
|
||||
import { QueryClientProvider, environmentManager } from '@tanstack/react-query'
|
||||
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
|
||||
import type { QueryClient } from '@tanstack/react-query'
|
||||
import { makeQueryClient } from '@/app/make-query-client'
|
||||
|
||||
let browserQueryClient: QueryClient | undefined = undefined
|
||||
|
||||
function getQueryClient() {
|
||||
if (environmentManager.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
|
||||
}
|
||||
}
|
||||
|
||||
export default function Providers({ children }: { children: React.ReactNode }) {
|
||||
// NOTE: Avoid useState when initializing the query client if you don't
|
||||
// have a suspense boundary between this and the code that may
|
||||
// suspend because React will throw away the client on the initial
|
||||
// render if it suspends and there is no boundary
|
||||
const queryClient = getQueryClient()
|
||||
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
{children}
|
||||
<ReactQueryDevtools />
|
||||
</QueryClientProvider>
|
||||
)
|
||||
}
|
||||
11
integrations/react-next-15/next.config.js
Normal file
11
integrations/react-next-15/next.config.js
Normal file
@@ -0,0 +1,11 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
eslint: {
|
||||
ignoreDuringBuilds: true,
|
||||
},
|
||||
typescript: {
|
||||
ignoreBuildErrors: true,
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = nextConfig
|
||||
21
integrations/react-next-15/package.json
Normal file
21
integrations/react-next-15/package.json
Normal file
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "react-next-15",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev --webpack",
|
||||
"build": "next build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@js-temporal/polyfill": "^0.4.4",
|
||||
"@tanstack/react-query": "workspace:*",
|
||||
"@tanstack/react-query-devtools": "workspace:*",
|
||||
"next": "^15.4.8",
|
||||
"react": "^19.2.1",
|
||||
"react-dom": "^19.2.1",
|
||||
"tupleson": "0.23.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.2.7",
|
||||
"@types/react-dom": "^19.2.3"
|
||||
}
|
||||
}
|
||||
34
integrations/react-next-15/tsconfig.json
Normal file
34
integrations/react-next-15/tsconfig.json
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES5",
|
||||
"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,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts",
|
||||
".eslintrc.cjs"
|
||||
],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
9
integrations/react-next-16/.eslintrc.cjs
Normal file
9
integrations/react-next-16/.eslintrc.cjs
Normal file
@@ -0,0 +1,9 @@
|
||||
/** @type {import('eslint').Linter.Config} */
|
||||
module.exports = {
|
||||
extends: ['plugin:react/jsx-runtime', 'plugin:react-hooks/recommended'],
|
||||
settings: {
|
||||
react: {
|
||||
version: 'detect',
|
||||
},
|
||||
},
|
||||
}
|
||||
34
integrations/react-next-16/.gitignore
vendored
Normal file
34
integrations/react-next-16/.gitignore
vendored
Normal file
@@ -0,0 +1,34 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
34
integrations/react-next-16/README.md
Normal file
34
integrations/react-next-16/README.md
Normal file
@@ -0,0 +1,34 @@
|
||||
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
||||
11
integrations/react-next-16/app/_action.ts
Normal file
11
integrations/react-next-16/app/_action.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
'use server'
|
||||
|
||||
import { revalidatePath } from 'next/cache'
|
||||
import { countRef } from './make-query-client'
|
||||
|
||||
export async function queryExampleAction() {
|
||||
await Promise.resolve()
|
||||
countRef.current++
|
||||
revalidatePath('/', 'page')
|
||||
return undefined
|
||||
}
|
||||
36
integrations/react-next-16/app/client-component.tsx
Normal file
36
integrations/react-next-16/app/client-component.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Temporal } from '@js-temporal/polyfill'
|
||||
|
||||
export function ClientComponent() {
|
||||
const query = useQuery({
|
||||
queryKey: ['data'],
|
||||
queryFn: async () => {
|
||||
const { count } = await (
|
||||
await fetch('http://localhost:3000/count')
|
||||
).json()
|
||||
|
||||
return {
|
||||
text: 'data from client',
|
||||
date: Temporal.PlainDate.from('2023-01-01'),
|
||||
count,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
if (query.isPending) {
|
||||
return <div>Loading...</div>
|
||||
}
|
||||
|
||||
if (query.isError) {
|
||||
return <div>An error has occurred!</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{query.data.text} - {query.data.date.toJSON()} - {query.data.count}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
5
integrations/react-next-16/app/count/route.ts
Normal file
5
integrations/react-next-16/app/count/route.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import { countRef } from '../make-query-client'
|
||||
|
||||
export const GET = () => {
|
||||
return Response.json({ count: countRef.current })
|
||||
}
|
||||
BIN
integrations/react-next-16/app/favicon.ico
Normal file
BIN
integrations/react-next-16/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
22
integrations/react-next-16/app/layout.tsx
Normal file
22
integrations/react-next-16/app/layout.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import React from 'react'
|
||||
import Providers from './providers'
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Create Next App',
|
||||
description: 'Generated by create next app',
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
<Providers>{children}</Providers>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
53
integrations/react-next-16/app/make-query-client.ts
Normal file
53
integrations/react-next-16/app/make-query-client.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import { Temporal } from '@js-temporal/polyfill'
|
||||
import { QueryClient, defaultShouldDehydrateQuery } from '@tanstack/react-query'
|
||||
import { createTson } from 'tupleson'
|
||||
import type { TsonType } from 'tupleson'
|
||||
|
||||
const plainDate = {
|
||||
deserialize: (v) => Temporal.PlainDate.from(v),
|
||||
key: 'PlainDate',
|
||||
serialize: (v) => v.toJSON(),
|
||||
test: (v) => v instanceof Temporal.PlainDate,
|
||||
} satisfies TsonType<Temporal.PlainDate, string>
|
||||
|
||||
export const countRef = {
|
||||
current: 0,
|
||||
}
|
||||
|
||||
export const tson = createTson({
|
||||
types: [plainDate],
|
||||
})
|
||||
|
||||
export function makeQueryClient() {
|
||||
return new QueryClient({
|
||||
defaultOptions: {
|
||||
hydrate: {
|
||||
/**
|
||||
* Called when the query is rebuilt from a prefetched
|
||||
* promise, before the query data is put into the cache.
|
||||
*/
|
||||
deserializeData: (data) => {
|
||||
return tson.deserialize(data)
|
||||
},
|
||||
},
|
||||
queries: {
|
||||
staleTime: 60 * 1000,
|
||||
},
|
||||
dehydrate: {
|
||||
serializeData: (data) => {
|
||||
return tson.serialize(data)
|
||||
},
|
||||
shouldDehydrateQuery: (query) => {
|
||||
return (
|
||||
defaultShouldDehydrateQuery(query) ||
|
||||
query.state.status === 'pending'
|
||||
)
|
||||
},
|
||||
shouldRedactErrors: (error) => {
|
||||
// Next.js automatically redacts errors for us
|
||||
return false
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
41
integrations/react-next-16/app/page.tsx
Normal file
41
integrations/react-next-16/app/page.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import { headers } from 'next/headers'
|
||||
import React from 'react'
|
||||
import { HydrationBoundary, dehydrate } from '@tanstack/react-query'
|
||||
import { Temporal } from '@js-temporal/polyfill'
|
||||
import { ClientComponent } from './client-component'
|
||||
import { makeQueryClient } from './make-query-client'
|
||||
import { queryExampleAction } from './_action'
|
||||
|
||||
export default function Home() {
|
||||
const queryClient = makeQueryClient()
|
||||
|
||||
queryClient.prefetchQuery({
|
||||
queryKey: ['data'],
|
||||
queryFn: async () => {
|
||||
const { count } = await (
|
||||
await fetch('http://localhost:3000/count', {
|
||||
headers: await headers(),
|
||||
})
|
||||
).json()
|
||||
|
||||
return {
|
||||
text: 'data from server',
|
||||
date: Temporal.PlainDate.from('2024-01-01'),
|
||||
count,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const state = dehydrate(queryClient)
|
||||
|
||||
return (
|
||||
<main>
|
||||
<HydrationBoundary state={state}>
|
||||
<ClientComponent />
|
||||
</HydrationBoundary>
|
||||
<form action={queryExampleAction}>
|
||||
<button type="submit">Increment</button>
|
||||
</form>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
39
integrations/react-next-16/app/providers.tsx
Normal file
39
integrations/react-next-16/app/providers.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
// In Next.js, this file would be called: app/providers.tsx
|
||||
'use client'
|
||||
|
||||
// Since QueryClientProvider relies on useContext under the hood, we have to put 'use client' on top
|
||||
import { QueryClientProvider, environmentManager } from '@tanstack/react-query'
|
||||
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
|
||||
import type { QueryClient } from '@tanstack/react-query'
|
||||
import { makeQueryClient } from '@/app/make-query-client'
|
||||
|
||||
let browserQueryClient: QueryClient | undefined = undefined
|
||||
|
||||
function getQueryClient() {
|
||||
if (environmentManager.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
|
||||
}
|
||||
}
|
||||
|
||||
export default function Providers({ children }: { children: React.ReactNode }) {
|
||||
// NOTE: Avoid useState when initializing the query client if you don't
|
||||
// have a suspense boundary between this and the code that may
|
||||
// suspend because React will throw away the client on the initial
|
||||
// render if it suspends and there is no boundary
|
||||
const queryClient = getQueryClient()
|
||||
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
{children}
|
||||
<ReactQueryDevtools />
|
||||
</QueryClientProvider>
|
||||
)
|
||||
}
|
||||
11
integrations/react-next-16/next.config.js
Normal file
11
integrations/react-next-16/next.config.js
Normal file
@@ -0,0 +1,11 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
eslint: {
|
||||
ignoreDuringBuilds: true,
|
||||
},
|
||||
typescript: {
|
||||
ignoreBuildErrors: true,
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = nextConfig
|
||||
21
integrations/react-next-16/package.json
Normal file
21
integrations/react-next-16/package.json
Normal file
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "react-next-16",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev --webpack",
|
||||
"build": "next build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@js-temporal/polyfill": "^0.4.4",
|
||||
"@tanstack/react-query": "workspace:*",
|
||||
"@tanstack/react-query-devtools": "workspace:*",
|
||||
"next": "^16.0.7",
|
||||
"react": "^19.2.1",
|
||||
"react-dom": "^19.2.1",
|
||||
"tupleson": "0.23.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.2.7",
|
||||
"@types/react-dom": "^19.2.3"
|
||||
}
|
||||
}
|
||||
35
integrations/react-next-16/tsconfig.json
Normal file
35
integrations/react-next-16/tsconfig.json
Normal file
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES5",
|
||||
"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": "react-jsx",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts",
|
||||
".eslintrc.cjs",
|
||||
".next/dev/types/**/*.ts"
|
||||
],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
25
integrations/react-nodenext/package.json
Normal file
25
integrations/react-nodenext/package.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "react-nodenext",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"test:types": "pnpm run test:types:ts6 && pnpm run test:types:ts7",
|
||||
"test:types:ts6": "node ../../node_modules/typescript/lib/tsc.js --pretty false --project tsconfig.json",
|
||||
"test:types:ts7": "node ../../node_modules/typescript70/lib/tsc.js --pretty false --project tsconfig.json"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tanstack/react-query": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.2.7"
|
||||
},
|
||||
"nx": {
|
||||
"targets": {
|
||||
"test:types": {
|
||||
"dependsOn": [
|
||||
"^build"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
10
integrations/react-nodenext/src/hooks.cts
Normal file
10
integrations/react-nodenext/src/hooks.cts
Normal file
@@ -0,0 +1,10 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
|
||||
export function useMyHook() {
|
||||
const query = useQuery({
|
||||
queryKey: ['test'],
|
||||
queryFn: () => 'hello',
|
||||
})
|
||||
|
||||
return { data: query.data }
|
||||
}
|
||||
10
integrations/react-nodenext/src/hooks.ts
Normal file
10
integrations/react-nodenext/src/hooks.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
|
||||
export function useMyHook() {
|
||||
const query = useQuery({
|
||||
queryKey: ['test'],
|
||||
queryFn: () => 'hello',
|
||||
})
|
||||
|
||||
return { data: query.data }
|
||||
}
|
||||
12
integrations/react-nodenext/tsconfig.json
Normal file
12
integrations/react-nodenext/tsconfig.json
Normal file
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "nodenext",
|
||||
"moduleResolution": "nodenext",
|
||||
"declaration": true,
|
||||
"emitDeclarationOnly": true,
|
||||
"strict": true,
|
||||
"rootDir": "./src",
|
||||
"outDir": "./dist"
|
||||
},
|
||||
"include": ["./src"]
|
||||
}
|
||||
9
integrations/react-vite/.eslintrc.cjs
Normal file
9
integrations/react-vite/.eslintrc.cjs
Normal file
@@ -0,0 +1,9 @@
|
||||
/** @type {import('eslint').Linter.Config} */
|
||||
module.exports = {
|
||||
extends: ['plugin:react/jsx-runtime', 'plugin:react-hooks/recommended'],
|
||||
settings: {
|
||||
react: {
|
||||
version: 'detect',
|
||||
},
|
||||
},
|
||||
}
|
||||
24
integrations/react-vite/.gitignore
vendored
Normal file
24
integrations/react-vite/.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
11
integrations/react-vite/index.html
Normal file
11
integrations/react-vite/index.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Vite + React</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
16
integrations/react-vite/package.json
Normal file
16
integrations/react-vite/package.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "react-vite",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "vite build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tanstack/react-query": "workspace:*",
|
||||
"@tanstack/react-query-devtools": "workspace:*",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"vite": "^6.4.1"
|
||||
}
|
||||
}
|
||||
24
integrations/react-vite/src/App.jsx
Normal file
24
integrations/react-vite/src/App.jsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import React from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
|
||||
const App = () => {
|
||||
const query = useQuery({
|
||||
queryKey: ['test'],
|
||||
queryFn: async () => {
|
||||
await new Promise((r) => setTimeout(r, 1000))
|
||||
return 'Success'
|
||||
},
|
||||
})
|
||||
|
||||
if (query.isPending) {
|
||||
return <div>Loading...</div>
|
||||
}
|
||||
|
||||
if (query.isError) {
|
||||
return <div>An error has occurred!</div>
|
||||
}
|
||||
|
||||
return <div>{query.data}</div>
|
||||
}
|
||||
|
||||
export default App
|
||||
18
integrations/react-vite/src/main.jsx
Normal file
18
integrations/react-vite/src/main.jsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
|
||||
import App from './App.jsx'
|
||||
|
||||
const queryClient = new QueryClient()
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'))
|
||||
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<App />
|
||||
<ReactQueryDevtools />
|
||||
</QueryClientProvider>
|
||||
</React.StrictMode>,
|
||||
)
|
||||
20
integrations/react-vite/tsconfig.json
Normal file
20
integrations/react-vite/tsconfig.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src", ".eslintrc.cjs"]
|
||||
}
|
||||
6
integrations/react-vite/vite.config.js
Normal file
6
integrations/react-vite/vite.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
23
integrations/react-webpack-4/package.json
Normal file
23
integrations/react-webpack-4/package.json
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "react-webpack-4",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --mode production"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tanstack/react-query": "workspace:*",
|
||||
"@tanstack/react-query-devtools": "workspace:*",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.26.0",
|
||||
"@babel/preset-env": "^7.26.0",
|
||||
"@babel/preset-react": "^7.25.9",
|
||||
"babel-loader": "^8.3.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"html-webpack-plugin": "^4.5.2",
|
||||
"webpack": "^4.44.2",
|
||||
"webpack-cli": "^4.10.0"
|
||||
}
|
||||
}
|
||||
11
integrations/react-webpack-4/public/index.html
Normal file
11
integrations/react-webpack-4/public/index.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>react-webpack-4</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
24
integrations/react-webpack-4/src/App.js
vendored
Normal file
24
integrations/react-webpack-4/src/App.js
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
import React from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
|
||||
const App = () => {
|
||||
const query = useQuery({
|
||||
queryKey: ['test'],
|
||||
queryFn: async () => {
|
||||
await new Promise((r) => setTimeout(r, 1000))
|
||||
return 'Success'
|
||||
},
|
||||
})
|
||||
|
||||
if (query.isPending) {
|
||||
return <div>Loading...</div>
|
||||
}
|
||||
|
||||
if (query.isError) {
|
||||
return <div>An error has occurred!</div>
|
||||
}
|
||||
|
||||
return <div>{query.data}</div>
|
||||
}
|
||||
|
||||
export default App
|
||||
18
integrations/react-webpack-4/src/index.js
vendored
Normal file
18
integrations/react-webpack-4/src/index.js
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
|
||||
import App from './App'
|
||||
|
||||
const queryClient = new QueryClient()
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'))
|
||||
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<App />
|
||||
<ReactQueryDevtools />
|
||||
</QueryClientProvider>
|
||||
</React.StrictMode>,
|
||||
)
|
||||
24
integrations/react-webpack-4/webpack.config.js
Normal file
24
integrations/react-webpack-4/webpack.config.js
Normal file
@@ -0,0 +1,24 @@
|
||||
const HtmlWebPackPlugin = require('html-webpack-plugin')
|
||||
|
||||
const htmlPlugin = new HtmlWebPackPlugin({
|
||||
template: './public/index.html',
|
||||
filename: './index.html',
|
||||
})
|
||||
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(?:js|mjs|cjs|jsx)$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: ['@babel/preset-env', '@babel/preset-react'],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [htmlPlugin],
|
||||
}
|
||||
22
integrations/react-webpack-5/package.json
Normal file
22
integrations/react-webpack-5/package.json
Normal file
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "react-webpack-5",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "webpack --mode production"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tanstack/react-query": "workspace:*",
|
||||
"@tanstack/react-query-devtools": "workspace:*",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.26.0",
|
||||
"@babel/preset-env": "^7.26.0",
|
||||
"@babel/preset-react": "^7.25.9",
|
||||
"babel-loader": "^9.2.1",
|
||||
"html-webpack-plugin": "^5.6.3",
|
||||
"webpack": "^5.96.1",
|
||||
"webpack-cli": "^5.1.4"
|
||||
}
|
||||
}
|
||||
11
integrations/react-webpack-5/public/index.html
Normal file
11
integrations/react-webpack-5/public/index.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>react-webpack-5</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
24
integrations/react-webpack-5/src/App.js
vendored
Normal file
24
integrations/react-webpack-5/src/App.js
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
import React from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
|
||||
const App = () => {
|
||||
const query = useQuery({
|
||||
queryKey: ['test'],
|
||||
queryFn: async () => {
|
||||
await new Promise((r) => setTimeout(r, 1000))
|
||||
return 'Success'
|
||||
},
|
||||
})
|
||||
|
||||
if (query.isPending) {
|
||||
return <div>Loading...</div>
|
||||
}
|
||||
|
||||
if (query.isError) {
|
||||
return <div>An error has occurred!</div>
|
||||
}
|
||||
|
||||
return <div>{query.data}</div>
|
||||
}
|
||||
|
||||
export default App
|
||||
18
integrations/react-webpack-5/src/index.js
vendored
Normal file
18
integrations/react-webpack-5/src/index.js
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
|
||||
import App from './App'
|
||||
|
||||
const queryClient = new QueryClient()
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'))
|
||||
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<App />
|
||||
<ReactQueryDevtools />
|
||||
</QueryClientProvider>
|
||||
</React.StrictMode>,
|
||||
)
|
||||
24
integrations/react-webpack-5/webpack.config.js
Normal file
24
integrations/react-webpack-5/webpack.config.js
Normal file
@@ -0,0 +1,24 @@
|
||||
const HtmlWebPackPlugin = require('html-webpack-plugin')
|
||||
|
||||
const htmlPlugin = new HtmlWebPackPlugin({
|
||||
template: './public/index.html',
|
||||
filename: './index.html',
|
||||
})
|
||||
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(?:js|mjs|cjs|jsx)$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: ['@babel/preset-env', '@babel/preset-react'],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [htmlPlugin],
|
||||
}
|
||||
24
integrations/solid-vite/.gitignore
vendored
Normal file
24
integrations/solid-vite/.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
11
integrations/solid-vite/index.html
Normal file
11
integrations/solid-vite/index.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Vite + Solid</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/index.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
15
integrations/solid-vite/package.json
Normal file
15
integrations/solid-vite/package.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "solid-vite",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "vite build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tanstack/solid-query": "workspace:*",
|
||||
"@tanstack/solid-query-devtools": "workspace:*",
|
||||
"solid-js": "^1.9.7",
|
||||
"vite": "^6.4.1",
|
||||
"vite-plugin-solid": "^2.11.6"
|
||||
}
|
||||
}
|
||||
22
integrations/solid-vite/src/App.jsx
Normal file
22
integrations/solid-vite/src/App.jsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import { Match, Switch } from 'solid-js'
|
||||
import { useQuery } from '@tanstack/solid-query'
|
||||
|
||||
const App = () => {
|
||||
const query = useQuery(() => ({
|
||||
queryKey: ['test'],
|
||||
queryFn: async () => {
|
||||
await new Promise((r) => setTimeout(r, 1000))
|
||||
return 'Success'
|
||||
},
|
||||
}))
|
||||
|
||||
return (
|
||||
<Switch>
|
||||
<Match when={query.isPending}>Loading...</Match>
|
||||
<Match when={query.isError}>An error has occurred!</Match>
|
||||
<Match when={query.isSuccess}>{query.data}</Match>
|
||||
</Switch>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
19
integrations/solid-vite/src/index.jsx
Normal file
19
integrations/solid-vite/src/index.jsx
Normal file
@@ -0,0 +1,19 @@
|
||||
/* @refresh reload */
|
||||
import { render } from 'solid-js/web'
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'
|
||||
import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
|
||||
import App from './App'
|
||||
|
||||
const queryClient = new QueryClient()
|
||||
|
||||
const root = document.getElementById('root')
|
||||
|
||||
render(
|
||||
() => (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<SolidQueryDevtools />
|
||||
<App />
|
||||
</QueryClientProvider>
|
||||
),
|
||||
root,
|
||||
)
|
||||
6
integrations/solid-vite/vite.config.js
Normal file
6
integrations/solid-vite/vite.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import solid from 'vite-plugin-solid'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [solid()],
|
||||
})
|
||||
24
integrations/svelte-vite/.gitignore
vendored
Normal file
24
integrations/svelte-vite/.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
11
integrations/svelte-vite/index.html
Normal file
11
integrations/svelte-vite/index.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Vite + Svelte</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
15
integrations/svelte-vite/package.json
Normal file
15
integrations/svelte-vite/package.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "svelte-vite",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "vite build"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/vite-plugin-svelte": "^5.1.1",
|
||||
"@tanstack/svelte-query": "workspace:*",
|
||||
"@tanstack/svelte-query-devtools": "workspace:*",
|
||||
"svelte": "^5.39.3",
|
||||
"vite": "^6.4.1"
|
||||
}
|
||||
}
|
||||
12
integrations/svelte-vite/src/App.svelte
Normal file
12
integrations/svelte-vite/src/App.svelte
Normal file
@@ -0,0 +1,12 @@
|
||||
<script>
|
||||
import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
|
||||
import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
|
||||
import Simple from './Simple.svelte'
|
||||
|
||||
const queryClient = new QueryClient()
|
||||
</script>
|
||||
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<Simple />
|
||||
<SvelteQueryDevtools />
|
||||
</QueryClientProvider>
|
||||
19
integrations/svelte-vite/src/Simple.svelte
Normal file
19
integrations/svelte-vite/src/Simple.svelte
Normal file
@@ -0,0 +1,19 @@
|
||||
<script>
|
||||
import { createQuery } from '@tanstack/svelte-query'
|
||||
|
||||
const query = createQuery({
|
||||
queryKey: ['test'],
|
||||
queryFn: async () => {
|
||||
await new Promise((r) => setTimeout(r, 1000))
|
||||
return 'Success'
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
{#if $query.isPending}
|
||||
<div>Loading...</div>
|
||||
{:else if $query.error}
|
||||
<div>An error has occurred!</div>
|
||||
{:else}
|
||||
<div>{$query.data}</div>
|
||||
{/if}
|
||||
7
integrations/svelte-vite/src/main.js
Normal file
7
integrations/svelte-vite/src/main.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import App from './App.svelte'
|
||||
|
||||
const app = new App({
|
||||
target: document.getElementById('app'),
|
||||
})
|
||||
|
||||
export default app
|
||||
2
integrations/svelte-vite/src/vite-env.d.ts
vendored
Normal file
2
integrations/svelte-vite/src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
/// <reference types="svelte" />
|
||||
/// <reference types="vite/client" />
|
||||
5
integrations/svelte-vite/svelte.config.js
Normal file
5
integrations/svelte-vite/svelte.config.js
Normal file
@@ -0,0 +1,5 @@
|
||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
|
||||
|
||||
export default {
|
||||
preprocess: vitePreprocess(),
|
||||
}
|
||||
6
integrations/svelte-vite/vite.config.js
Normal file
6
integrations/svelte-vite/vite.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [svelte()],
|
||||
})
|
||||
@@ -0,0 +1,9 @@
|
||||
import {
|
||||
definedInitialDataOptions,
|
||||
undefinedInitialDataOptions,
|
||||
} from '../dist/query-options.js'
|
||||
|
||||
export const options = {
|
||||
definedInitialDataOptions,
|
||||
undefinedInitialDataOptions,
|
||||
}
|
||||
26
integrations/vue-declaration-emit/package.json
Normal file
26
integrations/vue-declaration-emit/package.json
Normal file
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"name": "vue-declaration-emit",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"test:types": "pnpm run test:types:ts6 && pnpm run test:types:ts7",
|
||||
"test:types:ts6": "node ../../node_modules/typescript/lib/tsc.js --pretty false --project tsconfig.emit.json && node ../../node_modules/typescript/lib/tsc.js --pretty false --project tsconfig.consume.json",
|
||||
"test:types:ts7": "node ../../node_modules/typescript70/lib/tsc.js --pretty false --project tsconfig.emit.json && node ../../node_modules/typescript70/lib/tsc.js --pretty false --project tsconfig.consume.json"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tanstack/vue-query": "workspace:*",
|
||||
"vue": "^3.4.27"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "5.8.3"
|
||||
},
|
||||
"nx": {
|
||||
"targets": {
|
||||
"test:types": {
|
||||
"dependsOn": [
|
||||
"^build"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
14
integrations/vue-declaration-emit/src/query-options.ts
Normal file
14
integrations/vue-declaration-emit/src/query-options.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { queryOptions } from '@tanstack/vue-query'
|
||||
|
||||
/** @public */
|
||||
export const undefinedInitialDataOptions = queryOptions({
|
||||
queryKey: ['undefined-initial-data'],
|
||||
queryFn: async () => ({ value: 'data' }),
|
||||
})
|
||||
|
||||
/** @public */
|
||||
export const definedInitialDataOptions = queryOptions({
|
||||
queryKey: ['defined-initial-data'],
|
||||
queryFn: async () => ({ value: 'data' }),
|
||||
initialData: { value: 'initial data' },
|
||||
})
|
||||
11
integrations/vue-declaration-emit/tsconfig.consume.json
Normal file
11
integrations/vue-declaration-emit/tsconfig.consume.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"noEmit": true,
|
||||
"skipLibCheck": false,
|
||||
"strict": true
|
||||
},
|
||||
"include": ["./consumer"]
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user