-
-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(angular-query): add Angular Query
- Loading branch information
Showing
63 changed files
with
7,215 additions
and
471 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,120 @@ | ||
--- | ||
id: devtools | ||
title: Devtools | ||
ref: docs/react/devtools.md | ||
replace: { 'React': 'Angular' } | ||
--- | ||
|
||
## Install and Import the Devtools | ||
|
||
The devtools are a separate package that you need to install: | ||
|
||
```bash | ||
$ npm i @tanstack/angular-query-devtools-experimental | ||
# or | ||
$ pnpm add @tanstack/react-query-devtools-experimental | ||
# or | ||
$ yarn add @tanstack/react-query-devtools-experimental | ||
``` | ||
|
||
You can import the devtools like this: | ||
|
||
```tsx | ||
import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental' | ||
``` | ||
|
||
By default, React Query Devtools are only included in bundles when `process.env.NODE_ENV === 'development'`, so you don't need to worry about excluding them during a production build. | ||
|
||
## Floating Mode | ||
|
||
Floating Mode will mount the devtools as a fixed, floating element in your app and provide a toggle in the corner of the screen to show and hide the devtools. This toggle state will be stored and remembered in localStorage across reloads. | ||
|
||
Place the following code as high in your React app as you can. The closer it is to the root of the page, the better it will work! | ||
|
||
```tsx | ||
import { ReactQueryDevtools } from '@tanstack/react-query-devtools' | ||
|
||
function App() { | ||
return ( | ||
<QueryClientProvider client={queryClient}> | ||
{/* The rest of your application */} | ||
<ReactQueryDevtools initialIsOpen={false} /> | ||
</QueryClientProvider> | ||
) | ||
} | ||
``` | ||
|
||
### Options | ||
|
||
- `initialIsOpen: Boolean` | ||
- 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-left` | ||
- 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`, | ||
- 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. | ||
|
||
## Devtools in production | ||
|
||
Devtools are excluded in production builds. However, it might be desirable to lazy load the devtools in production: | ||
|
||
```tsx | ||
import * as React from 'react' | ||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query' | ||
import { ReactQueryDevtools } from '@tanstack/react-query-devtools' | ||
import { Example } from './Example' | ||
|
||
const queryClient = new QueryClient() | ||
|
||
const ReactQueryDevtoolsProduction = React.lazy(() => | ||
import('@tanstack/react-query-devtools/build/modern/production.js').then( | ||
(d) => ({ | ||
default: d.ReactQueryDevtools, | ||
}), | ||
), | ||
) | ||
|
||
function App() { | ||
const [showDevtools, setShowDevtools] = React.useState(false) | ||
|
||
React.useEffect(() => { | ||
// @ts-ignore | ||
window.toggleDevtools = () => setShowDevtools((old) => !old) | ||
}, []) | ||
|
||
return ( | ||
<QueryClientProvider client={queryClient}> | ||
<Example /> | ||
<ReactQueryDevtools initialIsOpen /> | ||
{showDevtools && ( | ||
<React.Suspense fallback={null}> | ||
<ReactQueryDevtoolsProduction /> | ||
</React.Suspense> | ||
)} | ||
</QueryClientProvider> | ||
) | ||
} | ||
|
||
export default App | ||
``` | ||
|
||
With this, calling `window.toggleDevtools()` will download the devtools bundle and show them. | ||
|
||
### Modern bundlers | ||
|
||
If your bundler supports package exports, you can use the following import path: | ||
|
||
```tsx | ||
const ReactQueryDevtoolsProduction = React.lazy(() => | ||
import('@tanstack/react-query-devtools/production').then((d) => ({ | ||
default: d.ReactQueryDevtools, | ||
})), | ||
) | ||
``` | ||
|
||
For TypeScript, you would need to set `moduleResolution: 'nodenext'` in your tsconfig, which requires at least TypeScript v4.7. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
--- | ||
id: graphql | ||
title: GraphQL | ||
ref: docs/react/graphql.md | ||
replace: { 'React': 'Angular', 'react-query': 'angular-query' } | ||
--- | ||
|
||
[//]: # 'Codegen' | ||
[//]: # 'Codegen' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
--- | ||
id: installation | ||
title: Installation | ||
--- | ||
### NPM | ||
|
||
Angular Query is compatible with Angular v16+. | ||
|
||
```bash | ||
$ npm i @tanstack/angular-query-experimental | ||
# or | ||
$ pnpm add @tanstack/react-query-experimental | ||
# or | ||
$ yarn add @tanstack/react-query-experimental | ||
``` | ||
|
||
> Wanna give it a spin before you download? Try out the [simple](../examples/angular/simple) or [basic](../examples/angular/basic) examples! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
--- | ||
id: overview | ||
title: Overview | ||
ref: docs/react/overview.md | ||
replace: { 'React': 'Angular' } | ||
--- | ||
|
||
[//]: # 'Example' | ||
[//]: # 'Example' | ||
[//]: # 'Materials' | ||
|
||
## You talked me into it, so what now? | ||
|
||
- Learn Angular Query at your own pace with our amazingly thorough [Walkthrough Guide](../installation) and [API Reference](../reference/createQuery) | ||
|
||
[//]: # 'Materials' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
--- | ||
id: quick-start | ||
title: Quick Start | ||
ref: docs/react/quick-start.md | ||
replace: { 'React': 'Angular' } | ||
--- | ||
|
||
[//]: # 'Example' | ||
|
||
If you're looking for a fully functioning example, please have a look at our [basic codesandbox example](../examples/angular/basic) | ||
|
||
### Provide the client to your App | ||
|
||
```typescript | ||
bootstrapApplication(AppComponent, { | ||
providers: [provideAngularQuery(new QueryClient())], | ||
}) | ||
``` | ||
|
||
### Component with signals, query and mutation | ||
|
||
```typescript | ||
import { | ||
CreateMutation, | ||
CreateQuery, | ||
UseQueryClient, | ||
} from '@tanstack/angular-query-experimental' | ||
import { getTodos, postTodo } from '../my-api' | ||
|
||
@Component({ | ||
standalone: true, | ||
imports: [CommonModule], | ||
template: ` | ||
<div> | ||
<ul> | ||
<li *ngFor="let todo of query().data"> | ||
{{ todo.title }} | ||
</li> | ||
</ul> | ||
<button | ||
(click)="onAddTodo()" | ||
> | ||
Add Todo | ||
</button> | ||
</div> | ||
`, | ||
}) | ||
export class TodosComponent { | ||
createQuery = inject(CreateQuery) | ||
createMutation = inject(CreateMutation) | ||
|
||
// Access the client | ||
useQueryClient = inject(UseQueryClient) | ||
|
||
// Signals | ||
queryOptions = signal({ queryKey: ['todos'], queryFn: getTodos }) | ||
|
||
mutationOptions = signal({ | ||
mutationFn: postTodo, | ||
onSuccess: () => { | ||
// Invalidate and refetch | ||
this.useQueryClient.invalidateQueries({ queryKey: ['todos'] }) | ||
}, | ||
}) | ||
|
||
// Queries | ||
query = this.createQuery(this.queryOptions) | ||
|
||
// Mutations | ||
mutation = this.createMutation(this.mutationOptions) | ||
|
||
onAddTodo() { | ||
this.mutation().mutate({ | ||
id: Date.now(), | ||
title: 'Do Laundry', | ||
}) | ||
} | ||
} | ||
``` | ||
|
||
[//]: # 'Example' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
Common errors: | ||
|
||
``` | ||
NullInjectorError: No provider for InjectionToken CreateQuery! | ||
``` |
Oops, something went wrong.