Skip to content

Commit

Permalink
Merge branch 'main' into docs/vue-reactivity-docs
Browse files Browse the repository at this point in the history
  • Loading branch information
suneettipirneni authored Nov 1, 2024
2 parents 3cbfa76 + c61ff1e commit f9362ea
Show file tree
Hide file tree
Showing 106 changed files with 1,343 additions and 812 deletions.
4 changes: 4 additions & 0 deletions docs/config.json
Original file line number Diff line number Diff line change
Expand Up @@ -1057,6 +1057,10 @@
{
"label": "RxJS autocomplete",
"to": "framework/angular/examples/rxjs"
},
{
"label": "Query options from a service",
"to": "framework/angular/examples/query-options-from-a-service"
}
]
}
Expand Down
2 changes: 1 addition & 1 deletion docs/framework/react/guides/disabling-queries.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ When `enabled` is `false`:
- The query will ignore query client `invalidateQueries` and `refetchQueries` calls that would normally result in the query refetching.
- `refetch` returned from `useQuery` can be used to manually trigger the query to fetch. However, it will not work with `skipToken`.

> Typescript users may prefer to use [skipToken](#typesafe-disabling-of-queries-using-skiptoken) as an alternative to `enabled = false`.
> TypeScript users may prefer to use [skipToken](#typesafe-disabling-of-queries-using-skiptoken) as an alternative to `enabled = false`.
[//]: # 'Example'

Expand Down
29 changes: 10 additions & 19 deletions docs/framework/react/guides/prefetching.md
Original file line number Diff line number Diff line change
Expand Up @@ -201,35 +201,26 @@ If you want to prefetch together with Suspense, you will have to do things a bit
You can now use `useSuspenseQuery` in the component that actually needs the data. You _might_ want to wrap this later component in its own `<Suspense>` boundary so the "secondary" query we are prefetching does not block rendering of the "primary" data.

```tsx
function App() {
function ArticleLayout({ id }) {
usePrefetchQuery({
queryKey: ['articles'],
queryFn: (...args) => {
return getArticles(...args)
},
queryKey: ['article-comments', id],
queryFn: getArticleCommentsById,
})

return (
<Suspense fallback="Loading articles...">
<Articles />
<Suspense fallback="Loading article">
<Article id={id} />
</Suspense>
)
}

function Articles() {
const { data: articles } = useSuspenseQuery({
queryKey: ['articles'],
queryFn: (...args) => {
return getArticles(...args)
},
function Article({ id }) {
const { data: articleData, isPending } = useSuspenseQuery({
queryKey: ['article', id],
queryFn: getArticleById,
})

return articles.map((article) => (
<div key={articleData.id}>
<ArticleHeader article={article} />
<ArticleBody article={article} />
</div>
))
...
}
```

Expand Down
14 changes: 12 additions & 2 deletions docs/framework/react/react-native.md
Original file line number Diff line number Diff line change
Expand Up @@ -166,11 +166,21 @@ export function useQueryFocusAware(notifyOnChangeProps?: NotifyOnChangeProps) {
)

return () => focusedRef.current
}
```

Example usage:

```tsx
function MyComponent() {
const isFocused = useQueryFocusAware()

useQuery({
const { dataUpdatedAt } = useQuery({
queryKey: ['key'],
queryFn: () => fetch(...),
enabled: () => focusedRef.current,
enabled: isFocused,
})

return <Text>DataUpdatedAt: {dataUpdatedAt}</Text>
}
```
4 changes: 2 additions & 2 deletions examples/angular/basic/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"@angular/core": "^17.3.12",
"@angular/platform-browser": "^17.3.12",
"@angular/platform-browser-dynamic": "^17.3.12",
"@tanstack/angular-query-experimental": "^5.59.13",
"@tanstack/angular-query-experimental": "^5.59.16",
"rxjs": "^7.8.1",
"tslib": "^2.6.3",
"zone.js": "^0.14.8"
Expand All @@ -23,7 +23,7 @@
"@angular-devkit/build-angular": "^17.3.8",
"@angular/cli": "^17.3.8",
"@angular/compiler-cli": "^17.3.12",
"@tanstack/angular-query-devtools-experimental": "^5.59.13",
"@tanstack/angular-query-devtools-experimental": "^5.59.16",
"typescript": "5.3.3"
}
}
4 changes: 2 additions & 2 deletions examples/angular/infinite-query-with-max-pages/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"@angular/core": "^17.3.12",
"@angular/platform-browser": "^17.3.12",
"@angular/platform-browser-dynamic": "^17.3.12",
"@tanstack/angular-query-experimental": "^5.59.13",
"@tanstack/angular-query-experimental": "^5.59.16",
"rxjs": "^7.8.1",
"tslib": "^2.6.3",
"zone.js": "^0.14.8"
Expand All @@ -23,7 +23,7 @@
"@angular-devkit/build-angular": "^17.3.8",
"@angular/cli": "^17.3.8",
"@angular/compiler-cli": "^17.3.12",
"@tanstack/angular-query-devtools-experimental": "^5.59.13",
"@tanstack/angular-query-devtools-experimental": "^5.59.16",
"typescript": "5.3.3"
}
}
4 changes: 2 additions & 2 deletions examples/angular/pagination/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"@angular/core": "^17.3.12",
"@angular/platform-browser": "^17.3.12",
"@angular/platform-browser-dynamic": "^17.3.12",
"@tanstack/angular-query-experimental": "^5.59.13",
"@tanstack/angular-query-experimental": "^5.59.16",
"rxjs": "^7.8.1",
"tslib": "^2.6.3",
"zone.js": "^0.14.8"
Expand All @@ -23,7 +23,7 @@
"@angular-devkit/build-angular": "^17.3.8",
"@angular/cli": "^17.3.8",
"@angular/compiler-cli": "^17.3.12",
"@tanstack/angular-query-devtools-experimental": "^5.59.13",
"@tanstack/angular-query-devtools-experimental": "^5.59.16",
"typescript": "5.3.3"
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"name": "Node.js",
"image": "mcr.microsoft.com/devcontainers/javascript-node:18"
}
6 changes: 6 additions & 0 deletions examples/angular/query-options-from-a-service/.eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
// @ts-check

/** @type {import('eslint').Linter.Config} */
const config = {}

module.exports = config
6 changes: 6 additions & 0 deletions examples/angular/query-options-from-a-service/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
# TanStack Query Angular query options from a service example

To run this example:

- `npm install` or `yarn` or `pnpm i` or `bun i`
- `npm run start` or `yarn start` or `pnpm start` or `bun start`
104 changes: 104 additions & 0 deletions examples/angular/query-options-from-a-service/angular.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"cli": {
"packageManager": "pnpm",
"analytics": false,
"cache": {
"enabled": false
}
},
"newProjectRoot": "projects",
"projects": {
"query-options-from-a-service": {
"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-devkit/build-angular:application",
"options": {
"outputPath": "dist/query-options-from-a-service",
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": ["zone.js"],
"tsConfig": "tsconfig.app.json",
"assets": ["src/favicon.ico", "src/assets"],
"styles": [],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "query-options-from-a-service:build:production"
},
"development": {
"buildTarget": "query-options-from-a-service:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "query-options-from-a-service:build"
}
}
}
}
}
}
30 changes: 30 additions & 0 deletions examples/angular/query-options-from-a-service/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
{
"name": "@tanstack/query-example-angular-query-options-from-a-service",
"type": "module",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development"
},
"private": true,
"dependencies": {
"@angular/common": "^17.3.12",
"@angular/compiler": "^17.3.12",
"@angular/core": "^17.3.12",
"@angular/platform-browser": "^17.3.12",
"@angular/platform-browser-dynamic": "^17.3.12",
"@angular/router": "^17.3.12",
"@tanstack/angular-query-experimental": "^5.59.16",
"rxjs": "^7.8.1",
"tslib": "^2.6.3",
"zone.js": "^0.14.8"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.3.8",
"@angular/cli": "^17.3.8",
"@angular/compiler-cli": "^17.3.12",
"@tanstack/angular-query-devtools-experimental": "^5.59.16",
"typescript": "5.3.3"
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<p>
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!
<strong>
(You may need to throttle your network speed to simulate longer loading
sequences)
</strong>
</p>
<angular-query-devtools initialIsOpen />
<router-outlet />
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { Component } from '@angular/core'
import { RouterOutlet } from '@angular/router'
import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'

@Component({
selector: 'app-root',
standalone: true,
imports: [AngularQueryDevtools, RouterOutlet],
templateUrl: './app.component.html',
styles: [],
})
export class AppComponent {}
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { provideHttpClient, withFetch } from '@angular/common/http'
import { provideRouter, withComponentInputBinding } from '@angular/router'
import {
QueryClient,
provideAngularQuery,
} from '@tanstack/angular-query-experimental'

import { routes } from './app.routes'
import type { ApplicationConfig } from '@angular/core'

export const appConfig: ApplicationConfig = {
providers: [
provideAngularQuery(new QueryClient()),
provideHttpClient(withFetch()),
provideRouter(routes, withComponentInputBinding()),
],
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import type { Route } from '@angular/router'

// loadComponent lazily loads the component
// when the component is the default export, there is no need to handle the promise

export const routes: Array<Route> = [
{
path: '',
loadComponent: () => import('./components/posts.component'),
},
{
path: 'post/:postId',
loadComponent: () => import('./components/post.component'),
},
]
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<div>
<div>
<a routerLink="/" href="#">Back</a>
</div>
@if (postQuery.isPending()) {
Loading...
} @else if (postQuery.isError()) {
Error: {{ postQuery.error().message }}
}
@if (postQuery.data(); as post) {
<h1>{{ post.title }}</h1>
<div>
<p>{{ post.body }}</p>
</div>
@if (postQuery.isFetching()) {
Background Updating...
}
}
</div>
Loading

0 comments on commit f9362ea

Please sign in to comment.