======================== CODE SNIPPETS ======================== TITLE: Install and Run Example DESCRIPTION: Install project dependencies using npm and then start the example application. This process requires Node.js and npm to be installed. SOURCE: https://github.com/tanstack/query/blob/main/examples/solid/basic/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install npm run start ``` ---------------------------------------- TITLE: Install and Run Example DESCRIPTION: Install project dependencies using npm and then start the example application. This process requires Node.js and npm to be installed. SOURCE: https://github.com/tanstack/query/blob/main/examples/solid/simple/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install npm run start ``` ---------------------------------------- TITLE: Install and Run Example Project DESCRIPTION: These commands are used to install the project's dependencies via npm and then start the development server to run the example. SOURCE: https://github.com/tanstack/query/blob/main/examples/react/prefetching/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install ``` LANGUAGE: shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Install and Run Example DESCRIPTION: Commands to install necessary tools and dependencies, and then start the example project. SOURCE: https://github.com/tanstack/query/blob/main/examples/react/react-native/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install --global expo-cli ``` LANGUAGE: shell CODE: ``` pnpm install ``` LANGUAGE: shell CODE: ``` pnpm start ``` ---------------------------------------- TITLE: Install and Run Example Project DESCRIPTION: These commands are used to install the project's dependencies via npm and then start the development server to run the example. SOURCE: https://github.com/tanstack/query/blob/main/examples/react/star-wars/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install ``` LANGUAGE: shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Install and Run Example Project DESCRIPTION: These commands are used to install the project's dependencies via npm and then start the development server to run the example. SOURCE: https://github.com/tanstack/query/blob/main/examples/react/rick-morty/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install ``` LANGUAGE: shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Install and Run Example DESCRIPTION: Install project dependencies using npm and then start the example application. This process requires Node.js and npm to be installed. SOURCE: https://github.com/tanstack/query/blob/main/examples/solid/basic-graphql-request/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install npm run start ``` ---------------------------------------- TITLE: Install and Run Example Project DESCRIPTION: These commands are used to install the project's dependencies via npm and then start the development server to run the example. SOURCE: https://github.com/tanstack/query/blob/main/examples/react/playground/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install ``` LANGUAGE: shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Install and Run Example Project DESCRIPTION: These commands are used to install the project's dependencies via npm and then start the development server to run the example. SOURCE: https://github.com/tanstack/query/blob/main/examples/react/simple/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install ``` LANGUAGE: shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Install and Run Example Project DESCRIPTION: These commands are used to install the project's dependencies via npm and then start the development server to run the example. SOURCE: https://github.com/tanstack/query/blob/main/examples/react/basic-graphql-request/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install ``` LANGUAGE: shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Install and Run Example DESCRIPTION: Install project dependencies using npm and then start the example application. This process requires Node.js and npm to be installed. SOURCE: https://github.com/tanstack/query/blob/main/examples/solid/default-query-function/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install npm run start ``` ---------------------------------------- TITLE: Install and Run Example Project DESCRIPTION: These commands are used to install the project's dependencies via npm and then start the development server to run the example. SOURCE: https://github.com/tanstack/query/blob/main/examples/react/basic/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install ``` LANGUAGE: shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Install and Run Example Project DESCRIPTION: These commands are used to install the project's dependencies via npm and then start the development server to run the example. SOURCE: https://github.com/tanstack/query/blob/main/examples/react/optimistic-updates-ui/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install ``` LANGUAGE: shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Install and Run Example Project DESCRIPTION: These commands are used to install the project's dependencies via npm and then start the development server to run the example. SOURCE: https://github.com/tanstack/query/blob/main/examples/react/pagination/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install ``` LANGUAGE: shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Install and Run Example Project DESCRIPTION: These commands are used to install the project's dependencies via npm and then start the development server to run the example. SOURCE: https://github.com/tanstack/query/blob/main/examples/react/load-more-infinite-scroll/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install ``` LANGUAGE: shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Install and Run Example Project DESCRIPTION: These commands are used to install the project's dependencies via npm and then start the development server to run the example. SOURCE: https://github.com/tanstack/query/blob/main/examples/react/chat/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install ``` LANGUAGE: shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Install and Run Example Project DESCRIPTION: These commands are used to install the project's dependencies via npm and then start the development server to run the example. SOURCE: https://github.com/tanstack/query/blob/main/examples/react/offline/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install ``` LANGUAGE: shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Install and Run Example Project DESCRIPTION: These commands are used to install the project's dependencies via npm and then start the development server to run the example. SOURCE: https://github.com/tanstack/query/blob/main/examples/react/optimistic-updates-cache/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install ``` LANGUAGE: shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Install and Run Example Project DESCRIPTION: These commands are used to install the project's dependencies via npm and then start the development server to run the example. SOURCE: https://github.com/tanstack/query/blob/main/examples/react/eslint-legacy/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install ``` LANGUAGE: shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Install and Run Example Project DESCRIPTION: These commands are used to install the project's dependencies via npm and then start the development server to run the example. SOURCE: https://github.com/tanstack/query/blob/main/examples/react/devtools-panel/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install ``` LANGUAGE: shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Install and Run Example DESCRIPTION: Commands to install dependencies and start the development server for the React Query star-wars example. SOURCE: https://github.com/tanstack/query/blob/main/examples/svelte/star-wars/README.md#_snippet_0 LANGUAGE: bash CODE: ``` npm install ``` LANGUAGE: bash CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Install and Run Example Project DESCRIPTION: These commands are used to install the project's dependencies via npm and then start the development server to run the example. SOURCE: https://github.com/tanstack/query/blob/main/examples/react/infinite-query-with-max-pages/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install ``` LANGUAGE: shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Install and Run Example Project DESCRIPTION: These commands are used to install the project's dependencies via npm and then start the development server to run the example. SOURCE: https://github.com/tanstack/query/blob/main/examples/react/default-query-function/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install ``` LANGUAGE: shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Install and Run Example Project DESCRIPTION: These commands are used to install the project's dependencies via npm and then start the development server to run the example. SOURCE: https://github.com/tanstack/query/blob/main/examples/react/auto-refetching/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install ``` LANGUAGE: shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Install and Run Project DESCRIPTION: Commands to install project dependencies and start the development server. These commands are essential for setting up the project environment and launching the application for development. SOURCE: https://github.com/tanstack/query/blob/main/examples/svelte/playground/README.md#_snippet_0 LANGUAGE: bash CODE: ``` npm install ``` LANGUAGE: bash CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Install and Run Example Project DESCRIPTION: These commands are used to install the project's dependencies via npm and then start the development server to run the example. SOURCE: https://github.com/tanstack/query/blob/main/examples/react/algolia/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install ``` LANGUAGE: shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Install and Run TanStack Query Example DESCRIPTION: These commands are used to install the necessary project dependencies using pnpm and then start the development server to run the example. SOURCE: https://github.com/tanstack/query/blob/main/examples/react/suspense/README.md#_snippet_0 LANGUAGE: shell CODE: ``` pnpm install ``` LANGUAGE: shell CODE: ``` pnpm dev ``` ---------------------------------------- TITLE: Project Setup Commands DESCRIPTION: Commands to install project dependencies and start the development server. Supports both npm and yarn package managers. SOURCE: https://github.com/tanstack/query/blob/main/examples/vue/persister/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install npm run dev ``` LANGUAGE: shell CODE: ``` yarn yarn dev ``` ---------------------------------------- TITLE: Run Example Project DESCRIPTION: Start the example project after installing dependencies. This command will launch the development server. SOURCE: https://github.com/tanstack/query/blob/main/examples/angular/rxjs/README.md#_snippet_1 LANGUAGE: shell CODE: ``` npm run start yarn start pnpm start bun start ``` ---------------------------------------- TITLE: Install and Run TanStack Query Angular Example DESCRIPTION: Commands to install dependencies and start the TanStack Query Angular example project. SOURCE: https://github.com/tanstack/query/blob/main/examples/angular/simple/README.md#_snippet_0 LANGUAGE: bash CODE: ``` npm install yarn pnpm i bun i ``` LANGUAGE: bash CODE: ``` npm run start yarn start pnpm start bun start ``` ---------------------------------------- TITLE: Run TanStack Query Example DESCRIPTION: Starts the development server for the TanStack Query example project using various package managers. SOURCE: https://github.com/tanstack/query/blob/main/examples/vue/2.6-basic/README.md#_snippet_1 LANGUAGE: npm CODE: ``` npm run dev ``` LANGUAGE: yarn CODE: ``` yarn dev ``` LANGUAGE: pnpm CODE: ``` pnpm dev ``` LANGUAGE: bun CODE: ``` bun dev ``` ---------------------------------------- TITLE: Install and Run TanStack Query Angular Pagination Example DESCRIPTION: Commands to install dependencies and start the TanStack Query Angular pagination example project. SOURCE: https://github.com/tanstack/query/blob/main/examples/angular/pagination/README.md#_snippet_0 LANGUAGE: bash CODE: ``` npm install # or yarn # or pnpm i # or bun i npm run start # or yarn start # or pnpm start # or bun start ``` ---------------------------------------- TITLE: Run TanStack Query Example DESCRIPTION: Start the TanStack Query Angular example project after installation using various package managers. SOURCE: https://github.com/tanstack/query/blob/main/examples/angular/basic/README.md#_snippet_1 LANGUAGE: bash CODE: ``` npm run start ``` LANGUAGE: bash CODE: ``` yarn start ``` LANGUAGE: bash CODE: ``` pnpm start ``` LANGUAGE: bash CODE: ``` bun start ``` ---------------------------------------- TITLE: Installation and Running Commands DESCRIPTION: Commands to install dependencies and start the example application. SOURCE: https://github.com/tanstack/query/blob/main/examples/angular/auto-refetching/README.md#_snippet_0 LANGUAGE: bash CODE: ``` npm install yarn pnpm i bun i ``` LANGUAGE: bash CODE: ``` npm run start yarn start pnpm start bun start ``` ---------------------------------------- TITLE: Installation and Development Commands DESCRIPTION: Commands to install dependencies and start the development server. These are typically executed in a Node.js environment. SOURCE: https://github.com/tanstack/query/blob/main/examples/react/react-router/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install npm run dev ``` ---------------------------------------- TITLE: Install TanStack Query Example Dependencies DESCRIPTION: Installs project dependencies using common JavaScript package managers like npm, yarn, pnpm, and bun. SOURCE: https://github.com/tanstack/query/blob/main/examples/vue/2.6-basic/README.md#_snippet_0 LANGUAGE: npm CODE: ``` npm install ``` LANGUAGE: yarn CODE: ``` yarn ``` LANGUAGE: pnpm CODE: ``` pnpm i ``` LANGUAGE: bun CODE: ``` bun i ``` ---------------------------------------- TITLE: Run TanStack Query Example Development Server DESCRIPTION: Starts the development server for the TanStack Query example project. This command typically watches for file changes and enables hot-reloading. SOURCE: https://github.com/tanstack/query/blob/main/examples/vue/2.7-basic/README.md#_snippet_1 LANGUAGE: bash CODE: ``` npm run dev ``` LANGUAGE: bash CODE: ``` yarn dev ``` LANGUAGE: bash CODE: ``` pnpm dev ``` ---------------------------------------- TITLE: Install TanStack Query Example Dependencies DESCRIPTION: Installs project dependencies using common JavaScript package managers like npm, yarn, or pnpm. This step is crucial before running the application. SOURCE: https://github.com/tanstack/query/blob/main/examples/vue/2.7-basic/README.md#_snippet_0 LANGUAGE: bash CODE: ``` npm install ``` LANGUAGE: bash CODE: ``` yarn ``` LANGUAGE: bash CODE: ``` pnpm i ``` ---------------------------------------- TITLE: Start SolidStart Development Server DESCRIPTION: Commands to start the development server for a SolidStart project. After installing dependencies, run `npm run dev`. You can also open the app in a new browser tab by adding the `-- --open` flag. SOURCE: https://github.com/tanstack/query/blob/main/examples/solid/solid-start-streaming/README.md#_snippet_1 LANGUAGE: bash CODE: ``` npm run dev # or start the server and open the app in a new browser tab npm run dev -- --open ``` ---------------------------------------- TITLE: Project Setup and Execution Commands DESCRIPTION: Commands required to install dependencies and start the development server for the TanStack Query dependent queries example. These commands are typically executed in a terminal within the project directory. SOURCE: https://github.com/tanstack/query/blob/main/examples/vue/dependent-queries/README.md#_snippet_0 LANGUAGE: bash CODE: ``` npm install # or yarn ``` LANGUAGE: bash CODE: ``` npm run dev # or yarn dev ``` ---------------------------------------- TITLE: Run Example (npm, yarn, pnpm, bun) DESCRIPTION: Starts the TanStack Query Angular router example application. This command is used after dependencies have been installed. SOURCE: https://github.com/tanstack/query/blob/main/examples/angular/router/README.md#_snippet_1 LANGUAGE: bash CODE: ``` npm run start ``` LANGUAGE: bash CODE: ``` yarn start ``` LANGUAGE: bash CODE: ``` pnpm start ``` LANGUAGE: bash CODE: ``` bun start ``` ---------------------------------------- TITLE: Vite + React Setup with TanStack Query DESCRIPTION: Demonstrates the basic setup for TanStack Query in a Vite + React application. This includes installing necessary packages and configuring the QueryClientProvider. SOURCE: https://github.com/tanstack/query/blob/main/integrations/react-vite/index.html#_snippet_0 LANGUAGE: bash CODE: ``` npm create vite@latest my-tanstack-query-app --template react cd my-tanstack-query-app npm install @tanstack/react-query npm install npm run dev ``` LANGUAGE: javascript CODE: ``` import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.jsx' import './index.css' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' // Create a client const queryClient = new QueryClient() ReactDOM.createRoot(document.getElementById('root')).render( , ) ``` ---------------------------------------- TITLE: Project Setup with Vite DESCRIPTION: Commands to create a new Vite project with Svelte and TypeScript, and install dependencies. SOURCE: https://github.com/tanstack/query/blob/main/examples/svelte/simple/index.html#_snippet_0 LANGUAGE: bash CODE: ``` npm create vite@latest my-svelte-tanstack-query-app --template svelte-ts cd my-svelte-tanstack-query-app npm install npm install @tanstack/query-core @tanstack/svelte-query ``` ---------------------------------------- TITLE: Astro Project Commands DESCRIPTION: Lists essential commands for managing an Astro project, including dependency installation, starting the development server, building for production, and previewing the build. SOURCE: https://github.com/tanstack/query/blob/main/examples/solid/astro/README.md#_snippet_2 LANGUAGE: sh CODE: ``` npm install npm run dev npm run build npm run preview npm run astro ... npm run astro -- --help ``` ---------------------------------------- TITLE: Start Example DESCRIPTION: Starts the development server or runs the example using common package managers. SOURCE: https://github.com/tanstack/query/blob/main/examples/angular/basic-persister/README.md#_snippet_1 LANGUAGE: bash CODE: ``` npm run start ``` LANGUAGE: bash CODE: ``` yarn start ``` LANGUAGE: bash CODE: ``` pnpm start ``` LANGUAGE: bash CODE: ``` bun start ``` ---------------------------------------- TITLE: Install Project Dependencies DESCRIPTION: Install project dependencies using your preferred package manager. This includes npm, yarn, pnpm, and bun. SOURCE: https://github.com/tanstack/query/blob/main/examples/angular/rxjs/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install yarn pnpm i bun i ``` ---------------------------------------- TITLE: Run TanStack Query Angular Devtools Example DESCRIPTION: Starts the development server to run the TanStack Query Angular devtools panel example. SOURCE: https://github.com/tanstack/query/blob/main/examples/angular/devtools-panel/README.md#_snippet_1 LANGUAGE: bash CODE: ``` npm run start yarn start pnpm start bun start ``` ---------------------------------------- TITLE: Run Example DESCRIPTION: Starts the development server to run the TanStack Query Angular infinite query example. This command compiles and serves the application. SOURCE: https://github.com/tanstack/query/blob/main/examples/angular/infinite-query-with-max-pages/README.md#_snippet_1 LANGUAGE: bash CODE: ``` npm run start # or yarn start # or pnpm start # or bun start ``` ---------------------------------------- TITLE: Basic Vue Query Setup DESCRIPTION: Demonstrates the basic setup for using Vue Query in a Vue application. This includes installing the necessary packages and creating a query client instance. SOURCE: https://github.com/tanstack/query/blob/main/examples/vue/2.7-basic/index.html#_snippet_0 LANGUAGE: javascript CODE: ``` import { VueQueryPlugin, QueryClient } from '@tanstack/vue-query'; import { createApp } from 'vue'; import App from './App.vue'; const queryClient = new QueryClient(); const app = createApp(App); app.use(VueQueryPlugin, { queryClient }); app.mount('#app'); ``` ---------------------------------------- TITLE: Basic Vue Query Setup DESCRIPTION: Demonstrates the basic setup for using Vue Query in a Vue application. This includes installing the necessary packages and creating a query client instance. SOURCE: https://github.com/tanstack/query/blob/main/examples/vue/basic/index.html#_snippet_0 LANGUAGE: javascript CODE: ``` import { VueQueryPlugin, QueryClient } from '@tanstack/vue-query'; import { createApp } from 'vue'; import App from './App.vue'; const queryClient = new QueryClient(); const app = createApp(App); app.use(VueQueryPlugin, { queryClient }); app.mount('#app'); ``` ---------------------------------------- TITLE: Run TanStack Query Angular Example DESCRIPTION: Starts the development server to run the TanStack Query Angular example. This command compiles and serves the application, allowing you to view the integrated query options. SOURCE: https://github.com/tanstack/query/blob/main/examples/angular/query-options-from-a-service/README.md#_snippet_1 LANGUAGE: bash CODE: ``` npm run start # or yarn start # or pnpm start # or bun start ``` ---------------------------------------- TITLE: Install Dependencies DESCRIPTION: Installs project dependencies using common package managers like npm, yarn, pnpm, or bun. This step is necessary before running the example. SOURCE: https://github.com/tanstack/query/blob/main/examples/angular/infinite-query-with-max-pages/README.md#_snippet_0 LANGUAGE: bash CODE: ``` npm install # or yarn # or pnpm i # or bun i ``` ---------------------------------------- TITLE: SolidJS: Basic TanStack Query Integration with useQuery DESCRIPTION: Demonstrates a basic setup for TanStack Query in a SolidJS application. It shows how to initialize `QueryClient`, provide it via `QueryClientProvider`, and use the `useQuery` hook to fetch and display data, handling loading, error, and success states. SOURCE: https://github.com/tanstack/query/blob/main/docs/framework/solid/quick-start.md#_snippet_0 LANGUAGE: typescript CODE: ``` import { QueryClient, QueryClientProvider, useQuery, } from '@tanstack/solid-query' import { Switch, Match, For } from 'solid-js' const queryClient = new QueryClient() function Example() { const query = useQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodos, })) return (

Loading...

Error: {query.error.message}

 {(todo) =>

{todo.title}

}
) } function App() { return ( ) } ``` ---------------------------------------- TITLE: Basic Vue Query Setup DESCRIPTION: Demonstrates the basic setup for using Vue Query in a Vue application. This includes installing the necessary packages and creating a query client instance. SOURCE: https://github.com/tanstack/query/blob/main/examples/vue/persister/index.html#_snippet_0 LANGUAGE: javascript CODE: ``` import { VueQueryPlugin, QueryClient } from '@tanstack/vue-query'; import { createApp } from 'vue'; import App from './App.vue'; const queryClient = new QueryClient(); const app = createApp(App); app.use(VueQueryPlugin, { queryClient }); app.mount('#app'); ``` ---------------------------------------- TITLE: TanStack/query Gitpod Setup Commands DESCRIPTION: Commands to run in the root and docs directories when using Gitpod for TanStack/query development. 'npm start' builds files in the root, and 'npm run dev' starts the development server in the docs directory. SOURCE: https://github.com/tanstack/query/blob/main/CONTRIBUTING.md#_snippet_8 LANGUAGE: bash CODE: ``` npm start ``` LANGUAGE: bash CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Basic Vue Query Setup DESCRIPTION: Demonstrates the basic setup for using Vue Query in a Vue application. This includes installing the necessary packages and creating a query client instance. SOURCE: https://github.com/tanstack/query/blob/main/examples/vue/2.6-basic/index.html#_snippet_0 LANGUAGE: javascript CODE: ``` import { VueQueryPlugin, QueryClient } from '@tanstack/vue-query'; import { createApp } from 'vue'; import App from './App.vue'; const queryClient = new QueryClient(); const app = createApp(App); app.use(VueQueryPlugin, { queryClient }); app.mount('#app'); ``` ---------------------------------------- TITLE: React Query Core Concepts Example DESCRIPTION: This TypeScript example demonstrates the fundamental usage of React Query hooks (`useQuery`, `useMutation`) and the `QueryClient` for managing data fetching and state. It shows how to provide the client to the application and how mutations can invalidate queries. Dependencies include `@tanstack/react-query` and a hypothetical `my-api` module. SOURCE: https://github.com/tanstack/query/blob/main/docs/framework/react/quick-start.md#_snippet_0 LANGUAGE: tsx CODE: ``` import { useQuery, useMutation, useQueryClient, QueryClient, QueryClientProvider, } from '@tanstack/react-query' import { getTodos, postTodo } from '../my-api' // Create a client const queryClient = new QueryClient() function App() { return ( // Provide the client to your App ) } function Todos() { // Access the client const queryClient = useQueryClient() // Queries const query = useQuery({ queryKey: ['todos'], queryFn: getTodos }) // Mutations const mutation = useMutation({ mutationFn: postTodo, onSuccess: () => { // Invalidate and refetch queryClient.invalidateQueries({ queryKey: ['todos'] }) }, }) return (
) } render(, document.getElementById('root')) ``` ---------------------------------------- TITLE: Install Dependencies (npm, yarn, pnpm, bun) DESCRIPTION: Installs project dependencies required to run the TanStack Query Angular router example. Supports common package managers like npm, yarn, pnpm, and bun. SOURCE: https://github.com/tanstack/query/blob/main/examples/angular/router/README.md#_snippet_0 LANGUAGE: bash CODE: ``` npm install ``` LANGUAGE: bash CODE: ``` yarn ``` LANGUAGE: bash CODE: ``` pnpm i ``` LANGUAGE: bash CODE: ``` bun i ``` ---------------------------------------- TITLE: Install TanStack Query DESCRIPTION: Install the necessary packages for TanStack Query using common package managers like npm, yarn, pnpm, or bun. SOURCE: https://github.com/tanstack/query/blob/main/examples/angular/basic/README.md#_snippet_0 LANGUAGE: bash CODE: ``` npm install ``` LANGUAGE: bash CODE: ``` yarn ``` LANGUAGE: bash CODE: ``` pnpm i ``` LANGUAGE: bash CODE: ``` bun i ``` ---------------------------------------- TITLE: Run Development Server DESCRIPTION: Starts the development server to build and test the project. This command is typically used after installing dependencies. SOURCE: https://github.com/tanstack/query/blob/main/examples/vue/simple/README.md#_snippet_1 LANGUAGE: bash CODE: ``` npm run dev ``` LANGUAGE: bash CODE: ``` yarn dev ``` LANGUAGE: bash CODE: ``` pnpm dev ``` LANGUAGE: bash CODE: ``` bun dev ``` ---------------------------------------- TITLE: TanStack Query Module Setup DESCRIPTION: This snippet demonstrates the necessary setup in your Angular module to enable TanStack Query. This typically involves importing the `QueryClient` and providing it. SOURCE: https://github.com/tanstack/query/blob/main/examples/angular/basic/src/index.html#_snippet_2 LANGUAGE: typescript CODE: ``` import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { QueryClient, QueryClientProvider } from '@tanstack/angular-query'; import { AppComponent } from './app.component'; import { TodoListComponent } from './todo-list.component'; const queryClient = new QueryClient(); @NgModule({ declarations: [ AppComponent, TodoListComponent ], imports: [ BrowserModule, HttpClientModule, QueryClientProvider(queryClient) ], providers: [], bootstrap: [AppComponent] }) export class AppModule {} ``` ---------------------------------------- TITLE: Run Development Server DESCRIPTION: Starts the Next.js development server using npm, yarn, or pnpm. This command is essential for local development and testing. SOURCE: https://github.com/tanstack/query/blob/main/examples/react/nextjs-app-prefetching/README.md#_snippet_0 LANGUAGE: bash CODE: ``` npm run dev # or yarn dev # or pnpm dev ``` ---------------------------------------- TITLE: Run Example Development Server DESCRIPTION: Executes the development server for a specific example within the TanStack Query repository. This allows testing examples against local changes or the latest release. SOURCE: https://github.com/tanstack/query/blob/main/CONTRIBUTING.md#_snippet_7 LANGUAGE: bash CODE: ``` pnpm run dev ``` ---------------------------------------- TITLE: Run Development Server DESCRIPTION: Starts the development server to build and test the project. This command is typically used after installing dependencies. SOURCE: https://github.com/tanstack/query/blob/main/examples/vue/basic/README.md#_snippet_1 LANGUAGE: bash CODE: ``` npm run dev ``` LANGUAGE: bash CODE: ``` yarn dev ``` LANGUAGE: bash CODE: ``` pnpm dev ``` LANGUAGE: bash CODE: ``` bun dev ``` ---------------------------------------- TITLE: Angular Module Setup DESCRIPTION: Illustrates the necessary setup in an Angular module to use TanStack Query, including importing `QueryClient` and providing it. SOURCE: https://github.com/tanstack/query/blob/main/examples/angular/router/src/index.html#_snippet_2 LANGUAGE: typescript CODE: ``` import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { QueryClient, QueryClientModule } from '@tanstack/angular-query'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule, QueryClientModule.forRoot(new QueryClient()), // Provide QueryClient ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ``` ---------------------------------------- TITLE: Install Solid Query via Bun DESCRIPTION: Install the Solid Query library using Bun, a fast all-in-one JavaScript runtime. This is an alternative to npm. SOURCE: https://github.com/tanstack/query/blob/main/docs/framework/solid/installation.md#_snippet_3 LANGUAGE: bash CODE: ``` bun add @tanstack/solid-query ``` ---------------------------------------- TITLE: TanStack Query Module Setup DESCRIPTION: This snippet illustrates the necessary setup in your Angular module to enable TanStack Query. It involves importing `QueryClient` and providing it to the application. SOURCE: https://github.com/tanstack/query/blob/main/examples/angular/simple/src/index.html#_snippet_2 LANGUAGE: typescript CODE: ``` import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { QueryClient, QueryClientProvider } from '@tanstack/angular-query'; import { AppComponent } from './app.component'; const queryClient = new QueryClient(); @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, QueryClientProvider ], providers: [ { provide: QueryClient, useValue: queryClient } ], bootstrap: [AppComponent] }) export class AppModule { } ``` ---------------------------------------- TITLE: Install Dependencies DESCRIPTION: Installs all necessary project dependencies using Yarn. This is typically the first step after cloning or setting up a new project. SOURCE: https://github.com/tanstack/query/blob/main/examples/vue/nuxt3/README.md#_snippet_0 LANGUAGE: bash CODE: ``` yarn install ``` ---------------------------------------- TITLE: Install TanStack Query Angular Devtools DESCRIPTION: Installs the necessary dependencies for TanStack Query and its Angular devtools panel using various package managers. SOURCE: https://github.com/tanstack/query/blob/main/examples/angular/devtools-panel/README.md#_snippet_0 LANGUAGE: bash CODE: ``` npm install yarn pnpm i bun i ``` ---------------------------------------- TITLE: Basic Vue Query Setup DESCRIPTION: Demonstrates the basic setup for using Vue Query in a Vue application. This includes installing the necessary packages and creating a query client instance. SOURCE: https://github.com/tanstack/query/blob/main/examples/vue/dependent-queries/index.html#_snippet_0 LANGUAGE: javascript CODE: ``` import { VueQueryPlugin, QueryClient } from '@tanstack/vue-query'; import { createApp } from 'vue'; import App from './App.vue'; const queryClient = new QueryClient(); const app = createApp(App); app.use(VueQueryPlugin, { queryClient }); app.mount('#app'); ``` ---------------------------------------- TITLE: Install Dependencies DESCRIPTION: Installs project dependencies using common package managers like npm, yarn, pnpm, or bun. SOURCE: https://github.com/tanstack/query/blob/main/examples/angular/basic-persister/README.md#_snippet_0 LANGUAGE: bash CODE: ``` npm install ``` LANGUAGE: bash CODE: ``` yarn ``` LANGUAGE: bash CODE: ``` pnpm i ``` LANGUAGE: bash CODE: ``` bun i ``` ---------------------------------------- TITLE: Develop Svelte Project DESCRIPTION: Start a development server for your Svelte project after installing dependencies. The `--open` flag automatically opens the application in a new browser tab. SOURCE: https://github.com/tanstack/query/blob/main/examples/svelte/basic/README.md#_snippet_1 LANGUAGE: bash CODE: ``` npm run dev # or start the server and open the app in a new browser tab npm run dev -- --open ``` ---------------------------------------- TITLE: Run Development Server DESCRIPTION: Starts the Next.js development server using npm, yarn, or pnpm. This command is essential for local development and testing. SOURCE: https://github.com/tanstack/query/blob/main/integrations/react-next-15/README.md#_snippet_0 LANGUAGE: bash CODE: ``` npm run dev # or yarn dev # or pnpm dev ``` ---------------------------------------- TITLE: Install TanStack Query Dependencies DESCRIPTION: Installs the necessary dependencies for TanStack Query and Angular. Supports multiple package managers like npm, yarn, pnpm, and bun. SOURCE: https://github.com/tanstack/query/blob/main/examples/angular/query-options-from-a-service/README.md#_snippet_0 LANGUAGE: bash CODE: ``` npm install # or yarn # or pnpm i # or bun i ``` ---------------------------------------- TITLE: Basic TanStack Query Setup with Vite and React DESCRIPTION: This snippet demonstrates the basic setup for using TanStack Query in a React application with Vite and TypeScript. It involves installing the necessary packages and configuring the QueryClientProvider. SOURCE: https://github.com/tanstack/query/blob/main/examples/react/shadow-dom/index.html#_snippet_0 LANGUAGE: bash CODE: ``` npm install @tanstack/react-query # or yarn add @tanstack/react-query # or pnpm add @tanstack/react-query ``` LANGUAGE: typescript CODE: ``` import React from 'react' import ReactDOM from 'react-dom/client' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import App from './App' const queryClient = new QueryClient() ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( ) ``` LANGUAGE: typescript CODE: ``` // src/App.tsx import React from 'react' import { useQuery } from '@tanstack/react-query' interface Todo { userId: number id: number title: string completed: boolean } function App() { const { data, isLoading, error } = useQuery({ queryKey: ['todos'], queryFn: async () => { const response = await fetch('https://jsonplaceholder.typicode.com/todos') return response.json() } }) if (isLoading) return 'Loading...' if (error) return 'An error has occurred: ' + (error as any).message return (

Todos

    {data?.map(todo => (
  • {todo.title}
    • ))}
) } ``` ---------------------------------------- TITLE: Install Solid Query via pnpm DESCRIPTION: Install the Solid Query library using pnpm, a fast, efficient, and disk-space-saving package manager. This is an alternative to npm. SOURCE: https://github.com/tanstack/query/blob/main/docs/framework/solid/installation.md#_snippet_1 LANGUAGE: bash CODE: ``` pnpm add @tanstack/solid-query ``` ---------------------------------------- TITLE: Install @tanstack/query-persist-client-core DESCRIPTION: Instructions for installing the query persistence client core package using various package managers. SOURCE: https://github.com/tanstack/query/blob/main/docs/framework/vue/plugins/createPersister.md#_snippet_0 LANGUAGE: bash CODE: ``` npm install @tanstack/query-persist-client-core ``` LANGUAGE: bash CODE: ``` pnpm add @tanstack/query-persist-client-core ``` LANGUAGE: bash CODE: ``` yarn add @tanstack/query-persist-client-core ``` LANGUAGE: bash CODE: ``` bun add @tanstack/query-persist-client-core ``` ---------------------------------------- TITLE: Run Development Server DESCRIPTION: Starts the Next.js development server using npm, yarn, or pnpm. This command is essential for local development and testing. SOURCE: https://github.com/tanstack/query/blob/main/integrations/react-next-14/README.md#_snippet_0 LANGUAGE: bash CODE: ``` npm run dev # or yarn dev # or pnpm dev ``` ---------------------------------------- TITLE: Install Solid Query via NPM DESCRIPTION: Install the Solid Query library using npm, the Node Package Manager. This is the recommended method for most projects using a module bundler. SOURCE: https://github.com/tanstack/query/blob/main/docs/framework/solid/installation.md#_snippet_0 LANGUAGE: bash CODE: ``` npm i @tanstack/solid-query ``` ---------------------------------------- TITLE: Start Development Server DESCRIPTION: Starts the local development server, usually accessible at http://localhost:3000. This command enables hot-reloading and other development-specific features. SOURCE: https://github.com/tanstack/query/blob/main/examples/vue/nuxt3/README.md#_snippet_1 LANGUAGE: bash CODE: ``` yarn dev ``` ---------------------------------------- TITLE: Develop Svelte Project DESCRIPTION: Start a development server for your Svelte project after installing dependencies. The `--open` flag automatically opens the application in a new browser tab. SOURCE: https://github.com/tanstack/query/blob/main/examples/svelte/ssr/README.md#_snippet_1 LANGUAGE: bash CODE: ``` npm run dev # or start the server and open the app in a new browser tab npm run dev -- --open ``` ---------------------------------------- TITLE: Develop Svelte Project DESCRIPTION: Start a development server for your Svelte project after installing dependencies. The `--open` flag automatically opens the application in a new browser tab. SOURCE: https://github.com/tanstack/query/blob/main/examples/svelte/optimistic-updates/README.md#_snippet_1 LANGUAGE: bash CODE: ``` npm run dev # or start the server and open the app in a new browser tab npm run dev -- --open ``` ---------------------------------------- TITLE: Develop Svelte Project DESCRIPTION: Start a development server for your Svelte project after installing dependencies. The `--open` flag automatically opens the application in a new browser tab. SOURCE: https://github.com/tanstack/query/blob/main/examples/svelte/auto-refetching/README.md#_snippet_1 LANGUAGE: bash CODE: ``` npm run dev # or start the server and open the app in a new browser tab npm run dev -- --open ``` ---------------------------------------- TITLE: Install Project Dependencies DESCRIPTION: Installs project dependencies using common package managers. Ensure you have Node.js and your chosen package manager installed. SOURCE: https://github.com/tanstack/query/blob/main/examples/vue/basic/README.md#_snippet_0 LANGUAGE: bash CODE: ``` npm install ``` LANGUAGE: bash CODE: ``` yarn ``` LANGUAGE: bash CODE: ``` pnpm i ``` LANGUAGE: bash CODE: ``` bun i ``` ---------------------------------------- TITLE: Start Angular Development Server DESCRIPTION: Starts a local development server for an Angular project. The application automatically reloads on source file changes. Navigate to http://localhost:4200/ in your browser. SOURCE: https://github.com/tanstack/query/blob/main/integrations/angular-cli-20/README.md#_snippet_0 LANGUAGE: bash CODE: ``` ng serve ``` ---------------------------------------- TITLE: Install Project Dependencies DESCRIPTION: Installs project dependencies using common package managers. Ensure you have Node.js and your chosen package manager installed. SOURCE: https://github.com/tanstack/query/blob/main/examples/vue/simple/README.md#_snippet_0 LANGUAGE: bash CODE: ``` npm install ``` LANGUAGE: bash CODE: ``` yarn ``` LANGUAGE: bash CODE: ``` pnpm i ``` LANGUAGE: bash CODE: ``` bun i ``` ---------------------------------------- TITLE: Develop Svelte Project DESCRIPTION: Start a development server for your Svelte project after installing dependencies. The `--open` flag automatically opens the application in a new browser tab. SOURCE: https://github.com/tanstack/query/blob/main/examples/svelte/load-more-infinite-scroll/README.md#_snippet_1 LANGUAGE: bash CODE: ``` npm run dev # or start the server and open the app in a new browser tab npm run dev -- --open ``` ---------------------------------------- TITLE: Install TanStack Query Devtools DESCRIPTION: Instructions for installing the TanStack Query Devtools package using various package managers. SOURCE: https://github.com/tanstack/query/blob/main/docs/framework/solid/devtools.md#_snippet_0 LANGUAGE: bash CODE: ``` npm i @tanstack/solid-query-devtools ``` LANGUAGE: bash CODE: ``` pnpm add @tanstack/solid-query-devtools ``` LANGUAGE: bash CODE: ``` yarn add @tanstack/solid-query-devtools ``` LANGUAGE: bash CODE: ``` bun add @tanstack/solid-query-devtools ``` ---------------------------------------- TITLE: Provide TanStack Query Client in Angular DESCRIPTION: Demonstrates how to provide the TanStack Query client to an Angular application. This setup is essential for enabling data fetching and state management with TanStack Query. It covers both standalone component applications and NgModule-based applications. SOURCE: https://github.com/tanstack/query/blob/main/docs/framework/angular/quick-start.md#_snippet_0 LANGUAGE: ts CODE: ``` import { provideHttpClient } from '@angular/common/http' import { provideTanStackQuery, QueryClient, } from '@tanstack/angular-query-experimental' // For standalone applications: // bootstrapApplication(AppComponent, { // providers: [provideHttpClient(), provideTanStackQuery(new QueryClient())], // }) // For NgModule-based applications: // @NgModule({ // declarations: [AppComponent], // imports: [BrowserModule], // providers: [provideTanStackQuery(new QueryClient())], // bootstrap: [AppComponent], // }) // export class AppModule {} ``` ---------------------------------------- TITLE: Vue Query Data Fetching and Mutation Example DESCRIPTION: This Vue 3 example showcases TanStack Query's core functionalities. It includes setting up a `useQuery` hook for fetching data, managing loading and error states, and implementing a `useMutation` hook to update data, followed by cache invalidation using `queryClient.invalidateQueries`. SOURCE: https://github.com/tanstack/query/blob/main/docs/framework/vue/quick-start.md#_snippet_0 LANGUAGE: vue CODE: ``` ```