diff --git a/docs/community-resources.md b/docs/community-resources.md new file mode 100644 index 0000000000..34a607afd1 --- /dev/null +++ b/docs/community-resources.md @@ -0,0 +1,194 @@ +--- +title: Community Resources +articles: + [ + { + title: "TkDodo's Blog Posts", + url: 'https://tkdodo.eu/blog/practical-react-query', + description: 'TkDodo, a maintainer of TanStack Query, writes a series of blog posts about the library. These articles offer general best practices and often present opinionated perspectives on using TanStack Query.', + }, + ] +media: + [ + { + title: 'React Query: It’s Time to Break up with your Global State! – Tanner Linsley', + url: 'https://www.youtube.com/watch?v=seU46c6Jz7E', + description: 'Get the lowdown on “global state” and how React Query can help you fetch, cache and manage your asynchronous data with a fraction of the effort and code that you’re used to', + }, + { + title: 'All About React Query (with Tanner Linsley) — Learn With Jason', + url: 'https://www.youtube.com/watch?v=DocXo3gqGdI', + description: 'Learn all about React Query with its creator Tanner Linsley.', + }, + { + title: 'Hooks for Fetching with ReactQuery Creator Tanner Linsley aka @tannerlinsley', + url: 'https://www.youtube.com/watch?v=PPvWXbSCtBU', + description: 'Learn how React Query simplifies asynchronous data fetching in React applications.', + }, + { + title: 'React Query - Open Source Friday stream with Tanner Linsley from', + url: 'https://www.youtube.com/watch?v=B3cJDT3j19I', + description: 'An Open Source Friday stream featuring Tanner Linsley.', + }, + { + title: 'React Query Presentation - Tanner Linsley', + url: 'https://www.youtube.com/watch?v=_ehibado6rU', + description: 'Tanner Linsley gives a talk to Lambda School students about the React Query.', + }, + { + title: 'TanStack Query v4 (with Dominik Dorfmeister) — Learn With Jason', + url: 'https://www.youtube.com/watch?v=SPPQm0dvEes', + description: 'Dominik Dorfmeister covering TanStack Query v4.', + }, + { + title: 'React Query Exposed by Its Maintainer', + url: 'https://www.youtube.com/watch?v=8-RTNnn9GR8', + description: 'Dominik Dorfmeister explores the less favorable aspects of React Query and situations where it may not be the best fit.', + }, + { + title: 'React Query API Design: Lessons Learned - Dominik Dorfmeister', + url: 'https://www.youtube.com/watch?v=l3PxErcKeAI', + description: 'Dominik Dorfmeister walks through some of the API design choices that were made in React Query to get to the DX.', + }, + ] +utilities: + [ + { + title: 'batshit', + url: 'https://github.com/yornaath/batshit', + description: 'A batch manager that will deduplicate and batch requests for a certain data type made within a window', + }, + { + title: 'GraphQL Code Generator', + url: 'https://the-guild.dev/graphql/codegen', + description: 'Generate React Query hooks from your GraphQL schema', + }, + + { + title: 'Http-wizard', + url: 'https://http-wizard.com', + description: 'End-to-end type-safe Fastify API with typeScript magic ✨', + }, + + { + title: 'Normy', + url: 'https://github.com/klis87/normy', + description: 'Automatic normalization and data updates for data fetching libraries', + }, + + { + title: 'Orval', + url: 'https://orval.dev/', + description: 'Generate TypeScript client from OpenAPI specifications.', + }, + { + title: 'Query Key Factory', + url: 'https://github.com/lukemorales/query-key-factory', + description: 'A library for creating typesafe standardized query keys, useful for cache management in @tanstack/query', + }, + + { + title: 'React Query Kit', + url: 'https://github.com/liaoliao666/react-query-kit', + description: '🕊️ A toolkit for ReactQuery that makes ReactQuery hooks reusable and typesafe', + }, + { + title: 'React Query Rewind', + url: 'https://reactqueryrewind.com/', + description: 'Time travel and visualize state during development', + }, + { + title: 'React Query Swagger', + url: 'https://github.com/Shaddix/react-query-swagger', + description: 'Generate React Query hooks based on Swagger API definitions', + }, + { + title: 'Suspensive React Query', + url: 'https://suspensive.org/docs/react-query/motivation', + description: 'Enhances React Query with Suspense support, allowing for simpler and more declarative data fetching', + }, + { + title: 'tRPC', + url: 'https://trpc.io/', + description: 'End-to-end typesafe APIs made easy', + }, + ] +others: + [ + { + title: 'Atomic CRM', + url: 'https://marmelab.com/atomic-crm/', + description: 'A full-featured CRM built with React, react-admin, and Supabase.', + }, + { + title: 'Blitz', + url: 'https://blitzjs.com/', + description: 'The Missing Fullstack Toolkit for Next.js', + }, + { + title: 'Connect', + url: 'https://connectrpc.com/docs', + description: 'A family of libraries for building browser and gRPC-compatible HTTP APIs.', + }, + { + title: 'Hey API', + url: 'https://heyapi.dev/openapi-ts/plugins/tanstack-query', + description: 'The OpenAPI to TypeScript codegen. Generate clients, SDKs, validators, and more.', + }, + { + title: 'Kubb', + url: 'https://www.kubb.dev/', + description: 'Generate SDKs for all your APIs', + }, + { + title: 'OpenAPI codegen', + url: 'https://github.com/fabien0102/openapi-codegen', + description: 'A tool for generating code based on an OpenAPI schema.', + }, + { + title: 'OpenAPI Qraft React', + url: 'https://github.com/OpenAPI-Qraft/openapi-qraft', + description: 'Generate type-safe API clients and Hooks for TanStack Query directly from OpenAPI Documents.Zero-runtime overhead, Proxy-based design, seamless SSR support, and full TanStack Query functionality.', + }, + { + title: 'OpenAPI React Query codegen', + url: 'https://github.com/7nohe/openapi-react-query-codegen', + description: 'Generate TanStack Query hooks based on an OpenAPI specification file.', + }, + { + title: 'OpenAPI zod client', + url: 'https://github.com/astahmer/openapi-zod-client', + description: 'Generate a zodios client from an OpenAPI specification', + }, + { + title: 'openapi-fetch', + url: 'https://openapi-ts.dev/openapi-react-query/', + description: 'A 2KB min, typesafe fetch wrapper that uses static TypeScript type inference and no runtime checks.', + }, + { + title: 'oRPC', + url: 'https://orpc.unnoq.com/docs/integrations/tanstack-query', + description: 'Easy to build APIs that are end-to-end type-safe and adhere to OpenAPI standards.', + }, + { + title: 'Rapini', + url: 'https://github.com/rametta/rapini', + description: '🥬 OpenAPI to React Query (or SWR) & Axios', + }, + { + title: 'ts-rest', + url: 'https://ts-rest.com/', + description: 'Incrementally adoptable type-safety for your new and existing APIs', + }, + { + title: 'wagmi', + url: 'https://wagmi.sh/', + description: 'React Hooks for Ethereum based on @tanstack/react-query', + }, + { + title: 'zodios', + url: 'https://www.zodios.org/', + description: 'End-to-end typesafe REST API toolbox', + }, + ] +--- diff --git a/docs/config.json b/docs/config.json index 0ca2b1fbac..f7cfdff9ef 100644 --- a/docs/config.json +++ b/docs/config.json @@ -6,6 +6,11 @@ "indexName": "tanstackquery" }, "sections": [ + { + "label": "Community Resources", + "children": [], + "frameworks": [] + }, { "label": "Getting Started", "children": [], @@ -29,10 +34,6 @@ "label": "Devtools", "to": "framework/react/devtools" }, - { - "label": "Videos & Talks", - "to": "framework/react/videos" - }, { "label": "Comparison", "to": "framework/react/comparison" @@ -1012,51 +1013,7 @@ } ] }, - { - "label": "Community Resources", - "children": [], - "frameworks": [ - { - "label": "react", - "children": [ - { - "label": "TkDodo's Blog", - "to": "framework/react/community/tkdodos-blog" - }, - { - "label": "Community Projects", - "to": "framework/react/community/community-projects" - } - ] - }, - { - "label": "solid", - "children": [ - { - "label": "TkDodo's Blog", - "to": "framework/solid/community/tkdodos-blog" - }, - { - "label": "Community Projects", - "to": "framework/solid/community/community-projects" - } - ] - }, - { - "label": "vue", - "children": [ - { - "label": "TkDodo's Blog", - "to": "framework/vue/community/tkdodos-blog" - }, - { - "label": "Community Projects", - "to": "framework/vue/community/community-projects" - } - ] - } - ] - }, + { "label": "Examples", "children": [], diff --git a/docs/framework/react/community/community-projects.md b/docs/framework/react/community/community-projects.md deleted file mode 100644 index 7c33d0838a..0000000000 --- a/docs/framework/react/community/community-projects.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -id: community-projects -title: Community Projects ---- - -There are lots of community projects that build on top of React Query and use it to provide additional functionality or enhanced developer experience. Projects are listed in alphabetical order. If you have a project that you would like to add to this list, please open a PR! - -> Please note that these projects are entirely community maintained. If you have questions about these projects, please reach out to the project maintainers. - -## Atomic CRM - -A full-featured CRM built with React, react-admin, and Supabase. - -Link: https://marmelab.com/atomic-crm/ - -## batshit - -A batch manager that will deduplicate and batch requests for a certain data type made within a window - -Link: https://github.com/yornaath/batshit - -## Blitz - -The Missing Fullstack Toolkit for Next.js - -Link: https://blitzjs.com/ - -## Connect - -A family of libraries for building browser and gRPC-compatible HTTP APIs. - -Link: https://connectrpc.com/docs - -## DevTools Browser Extensions - -Browser extensions for Chrome, Firefox, and Edge that provide devtools for TanStack Query, allowing you to inspect and debug queries, mutations, and cache state directly in browser DevTools. - -Links: - -- Chrome logo [Devtools for Chrome](https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai) -- Firefox logo [Devtools for Firefox](https://addons.mozilla.org/en-US/firefox/addon/tanstack-query-devtools/) -- Edge logo [Devtools for Edge](https://microsoftedge.microsoft.com/addons/detail/tanstack-query-devtools/edmdpkgkacmjopodhfolmphdenmddobj) - -## GraphQL Code Generator - -Generate React Query hooks from your GraphQL schema - -Link: https://the-guild.dev/graphql/codegen - -## Hey API - -The OpenAPI to TypeScript codegen. Generate clients, SDKs, validators, and more. - -Link: https://heyapi.dev/openapi-ts/plugins/tanstack-query - -## Http-wizard - -End-to-end type-safe Fastify API with typeScript magic ✨ - -Link: https://http-wizard.com - -## Kubb - -Generate SDKs for all your APIs - -Link: https://www.kubb.dev/ - -## NgQuery - -Query adapter for Angular - -Link: https://ngneat.github.io/query/ - -## Normy - -Automatic normalization and data updates for data fetching libraries - -Link: https://github.com/klis87/normy - -## OpenAPI codegen - -A tool for generating code based on an OpenAPI schema. - -Link: https://github.com/fabien0102/openapi-codegen - -## OpenAPI Qraft React - -Generate type-safe API clients and Hooks for TanStack Query directly from OpenAPI Documents. -Zero-runtime overhead, Proxy-based design, seamless SSR support, and full TanStack Query functionality. - -Link: https://github.com/OpenAPI-Qraft/openapi-qraft - -## OpenAPI React Query codegen - -Generate TanStack Query hooks based on an OpenAPI specification file. - -Link: https://github.com/7nohe/openapi-react-query-codegen - -### OpenAPI zod client - -Generate a zodios client from an OpenAPI specification - -Link: https://github.com/astahmer/openapi-zod-client - -## openapi-fetch - -A 2KB min, typesafe fetch wrapper that uses static TypeScript type inference and no runtime checks. - -Link: https://openapi-ts.dev/openapi-react-query/ - -## oRPC - -Easy to build APIs that are end-to-end type-safe and adhere to OpenAPI standards. - -Link: https://orpc.unnoq.com/docs/integrations/tanstack-query - -## Orval - -Generate TypeScript client from OpenAPI specifications - -Link: https://orval.dev/ - -## Query Key factory - -A library for creating typesafe standardized query keys, useful for cache management in `@tanstack/query` - -Link: https://github.com/lukemorales/query-key-factory - -## Rapini - -🥬 OpenAPI to React Query (or SWR) & Axios - -Link: https://github.com/rametta/rapini - -## React Query Kit - -🕊️ A toolkit for ReactQuery that makes ReactQuery hooks reusable and typesafe - -Link: https://github.com/liaoliao666/react-query-kit - -## React Query Rewind - -Time travel and visualize state during development - -Link: https://reactqueryrewind.com/ - -## React Query Swagger - -Generate React Query hooks based on Swagger API definitions - -Link: https://github.com/Shaddix/react-query-swagger - -## Suspensive React Query - -Enhances React Query with Suspense support, allowing for simpler and more declarative data fetching - -Link: https://suspensive.org/docs/react-query/motivation - -## tRPC - -End-to-end typesafe APIs made easy - -Link: https://trpc.io/ - -## ts-rest - -Incrementally adoptable type-safety for your new and existing APIs - -Link: https://ts-rest.com/ - -## wagmi - -React Hooks for Ethereum based on `@tanstack/react-query` - -Link: https://wagmi.sh/ - -## zodios - -End-to-end typesafe REST API toolbox - -Link: https://www.zodios.org/ diff --git a/docs/framework/react/community/tkdodos-blog.md b/docs/framework/react/community/tkdodos-blog.md deleted file mode 100644 index 92c328c104..0000000000 --- a/docs/framework/react/community/tkdodos-blog.md +++ /dev/null @@ -1,130 +0,0 @@ ---- -id: tkdodos-blog -title: TkDodo's Blog ---- - -TanStack Query maintainer [TkDodo](https://bsky.app/profile/tkdodo.eu) has a series of blog posts about using and working with the library. Some articles show general best practices, but most have an _opinionated_ point of view. - -## [#1: Practical React Query](https://tkdodo.eu/blog/practical-react-query) - -> An advanced introduction to React Query, showing practical tips that go beyond the docs. It covers explaining the defaults (`staleTime` vs. `gcTime`), concepts like keeping server and client state separate, handling dependencies and creating custom hooks, as well as outlining why the `enabled` option is very powerful. [Read more...](https://tkdodo.eu/blog/practical-react-query) - -## [#2: React Query Data Transformations](https://tkdodo.eu/blog/react-query-data-transformations) - -> Learn the possibilities to perform the quite common and important task of transforming your data with React Query. From transforming in the `queryFn` to using the `select` option, this article outlines the pros and cons of all the different approaches. [Read more...](https://tkdodo.eu/blog/react-query-data-transformations) - -## [#3: React Query Render Optimizations](https://tkdodo.eu/blog/react-query-render-optimizations) - -> Let's take a look at what you can do when your component re-renders too often when using React Query. The library is already pretty optimized, but there are still some opt-in features (like `tracked queries`) that you can use to avoid the `isFetching` transition. We're also looking into what `structural sharing` refers to. [Read more...](https://tkdodo.eu/blog/react-query-render-optimizations) - -## [#4: Status Checks in React Query](https://tkdodo.eu/blog/status-checks-in-react-query) - -> We usually check for `isPending` first before checking for `isError` , but sometimes, checking if `data` is available should be the first thing to do. This article shows how the wrong status check order can negatively impact user experience. [Read more...](https://tkdodo.eu/blog/status-checks-in-react-query) - -## [#5: Testing React Query](https://tkdodo.eu/blog/testing-react-query) - -> The docs already cover pretty well what you need to do to get started when testing React Query. This article shows some additional tips (like turning off `retries` or silencing the `console`) you might want to follow when testing custom hooks or components using them. It also links to an [example repository](https://github.com/TkDodo/testing-react-query) with tests for success and error states, powered by `mock-service-worker`. [Read more...](https://tkdodo.eu/blog/testing-react-query) - -## [#6: React Query and TypeScript](https://tkdodo.eu/blog/react-query-and-type-script) - -> Since React Query is written in TypeScript, it has great support for it. This blog post explains the various Generics, how you can leverage type inference to avoid having to explicitly type `useQuery` and friends, what to do with `unknown` errors, how type narrowing works and more! [Read more...](https://tkdodo.eu/blog/react-query-and-type-script) - -## [#7: Using WebSockets with React Query](https://tkdodo.eu/blog/using-web-sockets-with-react-query) - -> A step-by-step guide on how to make real-time notifications work with React Query, with either event-based subscriptions or pushing full data directly to the client. Applicable to anything from the browser native WebSocket API over Firebase and even GraphQL subscriptions. [Read more...](https://tkdodo.eu/blog/using-web-sockets-with-react-query) - -## [#8: Effective React Query Keys](https://tkdodo.eu/blog/effective-react-query-keys) - -> Most examples just use a simple String or Array Query Key, but how do you organize your keys effectively once your app grows past a todo list? This article shows how co-location and Query Key Factories can make life easier. [Read more...](https://tkdodo.eu/blog/effective-react-query-keys) - -## [#8a: Leveraging the Query Function Context](https://tkdodo.eu/blog/leveraging-the-query-function-context) - -> In this amendment to the previous blog post, we look at how we can leverage the Query Function Context and Object Query Keys for maximum safety as our app grows. [Read more...](https://tkdodo.eu/blog/leveraging-the-query-function-context) - -## [#9: Placeholder and Initial Data in React Query](https://tkdodo.eu/blog/placeholder-and-initial-data-in-react-query) - -> Placeholder and Initial Data are two similar yet different concepts for synchronously showing data instead of a loading spinner to improve an application's UX. This blog post compares the two and outlines the scenarios where each one shines. [Read more...](https://tkdodo.eu/blog/placeholder-and-initial-data-in-react-query) - -## [#10: React Query as a State Manager](https://tkdodo.eu/blog/react-query-as-a-state-manager) - -> React Query doesn't fetch any data for you - it's a data synchronization tool that excels when used for server state. This article has everything you need to know to make React Query your single source of truth state manager for your async state. You'll learn how to let React Query do it's magic and why customizing `staleTime` might be all you need. [Read more...](https://tkdodo.eu/blog/react-query-as-a-state-manager) - -## [#11: React Query Error Handling](https://tkdodo.eu/blog/react-query-error-handling) - -> Handling errors is an integral part of working with asynchronous data, especially data fetching. We have to face it: Not all requests will be successful, and not all Promises will be fulfilled. This blog post describes various ways of coping with errors in React Query, such as the error property, using Error Boundaries or onError callbacks, so that you can prepare your application for the cases when "Something went wrong". [Read more...](https://tkdodo.eu/blog/react-query-error-handling) - -## [#12: Mastering Mutations in React Query](https://tkdodo.eu/blog/mastering-mutations-in-react-query) - -> Mutations are the important, second part necessary to work with server data - for situations where you need to update it. This blog post covers what mutations are and how they are different from queries. You'll learn the difference between `mutate` and `mutateAsync` as well as how you can tie queries and mutations together. [Read more...](https://tkdodo.eu/blog/mastering-mutations-in-react-query) - -## [#13: Offline React Query](https://tkdodo.eu/blog/offline-react-query) - -> There are many ways to produce promises - which is everything React Query needs - but by far the biggest use-case is data fetching. Very often, that requires an active network connection. But sometimes, especially on mobile devices where, the network connection can be unreliable, you need your app to also work without it. In this article, you'll learn about the different offline strategies React Query offers. [Read more...](https://tkdodo.eu/blog/offline-react-query) - -## [#14: React Query and Forms](https://tkdodo.eu/blog/react-query-and-forms) - -> Forms tend to blur the line between what is server state and what is client state. In most applications, we would not only like to display state, but also let the user interact with it. This article shows two different approaches as well as some tips and tricks about using React Query with Forms. [Read more...](https://tkdodo.eu/blog/react-query-and-forms) - -## [#15: React Query FAQs](https://tkdodo.eu/blog/react-query-fa-qs) - -> This article tries to answer the most frequently asked questions about React Query. [Read more...](https://tkdodo.eu/blog/react-query-fa-qs) - -## [#16: React Query meets React Router](https://tkdodo.eu/blog/react-query-meets-react-router) - -> Remix and React Router are changing the game when thinking about _when_ to fetch data. This article goes into why React Query and Routers that support data loading are a match made in heaven. [Read more...](https://tkdodo.eu/blog/react-query-meets-react-router) - -## [#17: Seeding the Query Cache](https://tkdodo.eu/blog/seeding-the-query-cache) - -> This blog post shows multiple ways how to get data into your Query Cache _before_ you start rendering to minimize the amount of loading spinners displayed in your app. The options range from prefetching on the server or in your router to seeding cache entries via `setQueryData`. [Read more...](https://tkdodo.eu/blog/seeding-the-query-cache) - -## [#18: Inside React Query](https://tkdodo.eu/blog/inside-react-query) - -> If you've ever wondered how React Query works under the hood - this post is for you. It explains the architecture (including visuals), starting with the agnostic Query Core and how it communicates with the framework specific adapters. [Read more...](https://tkdodo.eu/blog/inside-react-query) - -## [#19: Type-safe React Query](https://tkdodo.eu/blog/type-safe-react-query) - -> There's a big difference between "having types" and "being type-safe". This article tries to outline those differences and shows how you can get the best possible type-safety when using React Query together with TypeScript [Read more...](https://tkdodo.eu/blog/type-safe-react-query) - -## [#20: You Might Not Need React Query](https://tkdodo.eu/blog/you-might-not-need-react-query) - -> If your application doesn’t rely on client-side data fetching, especially when using frameworks like Next.js or Remix with built-in server components, React Query may be unnecessary. That said, it still shines in hybrid use cases (like infinite scrolling or offline support) where its smart caching and revalidation can be invaluable. [Read more...](https://tkdodo.eu/blog/you-might-not-need-react-query) - -## [#21: Thinking in React Query](https://tkdodo.eu/blog/thinking-in-react-query) - -> React Query isn’t a data-fetching library - it's an async state manager designed to treat parameters as dependencies, optimize refetch behavior via `staleTime`, and encourage declarative patterns where `queryKey` drives cache and updates. A small shift in mindset can dramatically streamline how you use React Query. [Read more...](https://tkdodo.eu/blog/thinking-in-react-query) - -## [#22: React Query and React Context](https://tkdodo.eu/blog/react-query-and-react-context) - -> React Query lets components independently manage their own data, making them self-sufficient and resilient, but when shared data (like user info fetched higher up) is needed deeper in the tree, React Context can make that implicit dependency explicit and safer. [Read more...](https://tkdodo.eu/blog/react-query-and-react-context) - -## [#23: Why You Want React Query](https://tkdodo.eu/blog/why-you-want-react-query) - -> While fetching data with `fetch` inside `useEffect` may seem simple, it quickly gets tangled with bugs like race conditions, missing loading states, stale data, and Strict Mode quirks—making async state management far more complex than it appears. [Read more...](https://tkdodo.eu/blog/why-you-want-react-query) - -## [#24: The Query Options API](https://tkdodo.eu/blog/the-query-options-api) - -> React Query v5 introduces a unified "Query Options" API - where all functions like `useQuery`, `invalidateQueries`, and imperative calls accept a single object - simplifying the interface and making reuse across different query contexts much easier while at the same time improving type-safety. [Read more...](https://tkdodo.eu/blog/the-query-options-api) - -## [#25: Automatic Query Invalidation after Mutations](https://tkdodo.eu/blog/automatic-query-invalidation-after-mutations) - -> React Query doesn’t automatically tie mutations to queries - but you can leverage "global cache callbacks" in a central `MutationCache` to define shared behaviors like invalidating queries on every mutation. [Read more...](https://tkdodo.eu/blog/automatic-query-invalidation-after-mutations) - -## [#26: How Infinite Queries work](https://tkdodo.eu/blog/how-infinite-queries-work) - -> This blog post is a deep dive into how Infinite Queries are designed and work under the hood. Interestingly, there is no distinct InfiniteQuery representation - just a different "behaviour" attached to regular Queries. [Read more...](https://tkdodo.eu/blog/how-infinite-queries-work) - -## [#27: React Query API Design - Lessons Learned](https://tkdodo.eu/blog/react-query-api-design-lessons-learned) - -> In this talk, Dominik walks us through some of the API design choices that were made in React Query to get to its arguably good developer experience. You'll hear stories about things that went well, but also about tradeoffs and mistakes that were made, and what lessons we can all learn from those. [Read more...](https://tkdodo.eu/blog/react-query-api-design-lessons-learned) - -## [#28: React Query - The Bad Parts](https://tkdodo.eu/blog/react-query-the-bad-parts) - -> In this talk, Dominik explores the less favorable aspects of React Query and situations where it may not be the best fit. No library is perfect; every choice involves trade-offs. By the end of this talk, you'll have a better understanding of React Query's limitations and why it remains a compelling choice despite them. [Read more...](https://tkdodo.eu/blog/react-query-the-bad-parts) - -## [#29: Concurrent Optimistic Updates in React Query](https://tkdodo.eu/blog/concurrent-optimistic-updates-in-react-query) - -> Optimistic updates in React Query can cause race conditions when multiple mutations run at once, leading to inconsistent UI states. Cancelling in-flight queries helps, but overlapping invalidations may still overwrite newer updates. [Read more...](https://tkdodo.eu/blog/concurrent-optimistic-updates-in-react-query) - -## [#30: React Query Selectors, Supercharged](https://tkdodo.eu/blog/react-query-selectors-supercharged) - -> React Query’s `select` option enables components to subscribe only to the specific part of a query’s data they care about - so updating one field won’t cause unrelated UI to re-render unnecessarily. This fine-grained approach keeps full responses in the cache while optimizing component updates for performance. [Read more...](https://tkdodo.eu/blog/react-query-selectors-supercharged) diff --git a/docs/framework/react/guides/advanced-ssr.md b/docs/framework/react/guides/advanced-ssr.md index 30abf188bb..6961b339f0 100644 --- a/docs/framework/react/guides/advanced-ssr.md +++ b/docs/framework/react/guides/advanced-ssr.md @@ -626,6 +626,6 @@ Similarly, it would be impossible to teach all the intricacies of this new parad ## Further reading -To understand if your application can benefit from React Query when also using Server Components, have a look at [You Might Not Need React Query](../../community/tkdodos-blog.md#20-you-might-not-need-react-query) from the Community Resources. +To understand if your application can benefit from React Query when also using Server Components, see the article [You Might Not Need React Query](https://tkdodo.eu/blog/you-might-not-need-react-query). [//]: # 'Materials' diff --git a/docs/framework/react/guides/important-defaults.md b/docs/framework/react/guides/important-defaults.md index 5330ca4eee..e6183996b9 100644 --- a/docs/framework/react/guides/important-defaults.md +++ b/docs/framework/react/guides/important-defaults.md @@ -40,10 +40,10 @@ Out of the box, TanStack Query is configured with **aggressive but sane** defaul ## Further Reading -Have a look at the following articles from our Community Resources for further explanations of the defaults: +Have a look at the following articles from our [Community Resources](../../../../community-resources) for further explanations of the defaults: -- [Practical React Query](../../community/tkdodos-blog.md#1-practical-react-query) -- [React Query as a State Manager](../../community/tkdodos-blog.md#10-react-query-as-a-state-manager) -- [Thinking in React Query](../../community/tkdodos-blog.md#21-thinking-in-react-query) +- [Practical React Query](https://tkdodo.eu/blog/practical-react-query) +- [React Query as a State Manager](https://tkdodo.eu/blog/react-query-as-a-state-manager) +- [Thinking in React Query](https://tkdodo.eu/blog/thinking-in-react-query) [//]: # 'Materials' diff --git a/docs/framework/react/guides/infinite-queries.md b/docs/framework/react/guides/infinite-queries.md index d73cfb8dd3..dccadec1a1 100644 --- a/docs/framework/react/guides/infinite-queries.md +++ b/docs/framework/react/guides/infinite-queries.md @@ -261,7 +261,6 @@ return useInfiniteQuery({ ## Further reading -To get a better understanding of how Infinite Queries work under the hood, read [How Infinite Queries work](../../community/tkdodos-blog.md#26-how-infinite-queries-work) from -the Community Resources. +To get a better understanding of how Infinite Queries work under the hood, see the article [How Infinite Queries work](https://tkdodo.eu/blog/how-infinite-queries-work). [//]: # 'Materials' diff --git a/docs/framework/react/guides/initial-query-data.md b/docs/framework/react/guides/initial-query-data.md index 3e1c23920b..bc6ed2ce34 100644 --- a/docs/framework/react/guides/initial-query-data.md +++ b/docs/framework/react/guides/initial-query-data.md @@ -170,6 +170,6 @@ const result = useQuery({ ## Further reading -For a comparison between `Initial Data` and `Placeholder Data`, have a look at the [Community Resources](../../community/tkdodos-blog.md#9-placeholder-and-initial-data-in-react-query). +For a comparison between `Initial Data` and `Placeholder Data`, see the [article by TkDodo](https://tkdodo.eu/blog/placeholder-and-initial-data-in-react-query). [//]: # 'Materials' diff --git a/docs/framework/react/guides/invalidations-from-mutations.md b/docs/framework/react/guides/invalidations-from-mutations.md index f1396a312c..6f2198021c 100644 --- a/docs/framework/react/guides/invalidations-from-mutations.md +++ b/docs/framework/react/guides/invalidations-from-mutations.md @@ -52,7 +52,6 @@ You can wire up your invalidations to happen using any of the callbacks availabl ## Further reading -For a technique to automatically invalidate Queries after Mutations, have a look at [Automatic Query Invalidation after Mutations](../../community/tkdodos-blog.md#25-automatic-query-invalidation-after-mutations) from -the Community Resources. +For a technique to automatically invalidate Queries after Mutations, have a look at [TkDodo's article on Automatic Query Invalidation after Mutations](https://tkdodo.eu/blog/automatic-query-invalidation-after-mutations). [//]: # 'Materials' diff --git a/docs/framework/react/guides/mutations.md b/docs/framework/react/guides/mutations.md index 925954bf09..ced1fcfc12 100644 --- a/docs/framework/react/guides/mutations.md +++ b/docs/framework/react/guides/mutations.md @@ -408,7 +408,6 @@ const mutation = useMutation({ ## Further reading -For more information about mutations, have a look at [#12: Mastering Mutations in React Query](../../community/tkdodos-blog.md#12-mastering-mutations-in-react-query) from -the Community Resources. +For more information about mutations, have a look at [TkDodo's article on Mastering Mutations in React Query](https://tkdodo.eu/blog/mastering-mutations-in-react-query). [//]: # 'Materials' diff --git a/docs/framework/react/guides/optimistic-updates.md b/docs/framework/react/guides/optimistic-updates.md index 27b958dd97..c35fdb3700 100644 --- a/docs/framework/react/guides/optimistic-updates.md +++ b/docs/framework/react/guides/optimistic-updates.md @@ -191,6 +191,6 @@ However, if you have multiple places on the screen that would require to know ab ## Further reading -Have a look at the Community Resources for a guide on [Concurrent Optimistic Updates](../../community/tkdodos-blog.md#29-concurrent-optimistic-updates-in-react-query). +Have a look at the guide by TkDodo on [Concurrent Optimistic Updates](https://tkdodo.eu/blog/concurrent-optimistic-updates-in-react-query). [//]: # 'Materials' diff --git a/docs/framework/react/guides/placeholder-query-data.md b/docs/framework/react/guides/placeholder-query-data.md index b9e1a0fa5f..d19d17872a 100644 --- a/docs/framework/react/guides/placeholder-query-data.md +++ b/docs/framework/react/guides/placeholder-query-data.md @@ -96,6 +96,6 @@ function Todo({ blogPostId }) { ## Further reading -For a comparison between `Placeholder Data` and `Initial Data`, have a look at the [Community Resources](../../community/tkdodos-blog.md#9-placeholder-and-initial-data-in-react-query). +For a comparison between `Placeholder Data` and `Initial Data`, see the [article by TkDodo](https://tkdodo.eu/blog/placeholder-and-initial-data-in-react-query). [//]: # 'Materials' diff --git a/docs/framework/react/guides/prefetching.md b/docs/framework/react/guides/prefetching.md index d11b6f22b4..197a3a57de 100644 --- a/docs/framework/react/guides/prefetching.md +++ b/docs/framework/react/guides/prefetching.md @@ -431,7 +431,7 @@ queryClient.setQueryData(['todos'], todos) ## Further reading -For a deep-dive on how to get data into your Query Cache before you fetch, have a look at [#17: Seeding the Query Cache](../../community/tkdodos-blog.md#17-seeding-the-query-cache) from the Community Resources. +For a deep-dive on how to get data into your Query Cache before you fetch, see the [article Seeding the Query Cache by TkDodo](https://tkdodo.eu/blog/seeding-the-query-cache). Integrating with Server Side routers and frameworks is very similar to what we just saw, with the addition that the data has to passed from the server to the client to be hydrated into the cache there. To learn how, continue on to the [Server Rendering & Hydration guide](../ssr.md). diff --git a/docs/framework/react/guides/queries.md b/docs/framework/react/guides/queries.md index 8107801143..f255483a87 100644 --- a/docs/framework/react/guides/queries.md +++ b/docs/framework/react/guides/queries.md @@ -140,6 +140,6 @@ So keep in mind that a query can be in `pending` state without actually fetching ## Further Reading -For an alternative way of performing status checks, have a look at the [Community Resources](../../community/tkdodos-blog.md#4-status-checks-in-react-query). +For an alternative way of performing status checks, have a look at [this article by TkDodo](https://tkdodo.eu/blog/status-checks-in-react-query). [//]: # 'Materials' diff --git a/docs/framework/react/guides/query-keys.md b/docs/framework/react/guides/query-keys.md index 4d95b09bd9..f21c87c62a 100644 --- a/docs/framework/react/guides/query-keys.md +++ b/docs/framework/react/guides/query-keys.md @@ -97,7 +97,7 @@ Note that query keys act as dependencies for your query functions. Adding depend ## Further reading -For tips on organizing Query Keys in larger applications, have a look at [Effective React Query Keys](../../community/tkdodos-blog.md#8-effective-react-query-keys) and check the [Query Key Factory Package](../../community/community-projects.md#query-key-factory) from -the Community Resources. +For tips on organizing Query Keys in larger applications, have a look at [Effective React Query Keys](https://tkdodo.eu/blog/effective-react-query-keys) and check the [Query Key Factory Package](https://github.com/lukemorales/query-key-factory) from +the [Community Resources](../../../../community-resources). [//]: # 'Materials' diff --git a/docs/framework/react/guides/render-optimizations.md b/docs/framework/react/guides/render-optimizations.md index e06dd84825..4d7ac243bf 100644 --- a/docs/framework/react/guides/render-optimizations.md +++ b/docs/framework/react/guides/render-optimizations.md @@ -72,5 +72,5 @@ export const useTodoCount = () => { ## Further Reading -For an in-depth guide about these topics, read [React Query Render Optimizations](../../community/tkdodos-blog.md#3-react-query-render-optimizations) from -the Community Resources. To learn how to best optimize the `select` option, read [React Query Selectors, Supercharged](../../community/tkdodos-blog.md#30-react-query-selectors-supercharged) +For an in-depth guide about these topics, read [React Query Render Optimizations](https://tkdodo.eu/blog/react-query-render-optimizations) from +the TkDodo. To learn how to best optimize the `select` option, read [React Query Selectors, Supercharged](https://tkdodo.eu/blog/react-query-selectors-supercharged) diff --git a/docs/framework/react/guides/testing.md b/docs/framework/react/guides/testing.md index 598d9c30cc..8228cb1b0a 100644 --- a/docs/framework/react/guides/testing.md +++ b/docs/framework/react/guides/testing.md @@ -167,5 +167,4 @@ _Note_: when using React 18, the semantics of `waitFor` have changed as noted ab ## Further reading -For additional tips and an alternative setup using `mock-service-worker`, have a look at [Testing React Query](../../community/tkdodos-blog.md#5-testing-react-query) from -the Community Resources. +For additional tips and an alternative setup using `mock-service-worker`, have a look at [this article by TkDodo on Testing React Query](https://tkdodo.eu/blog/testing-react-query). diff --git a/docs/framework/react/overview.md b/docs/framework/react/overview.md index 5ca9c1eaa4..977814c89d 100644 --- a/docs/framework/react/overview.md +++ b/docs/framework/react/overview.md @@ -97,6 +97,6 @@ function Example() { - Consider taking the official [TanStack Query Course](https://query.gg?s=tanstack) (or buying it for your whole team!) - Learn TanStack Query at your own pace with our amazingly thorough [Walkthrough Guide](../installation.md) and [API Reference](../reference/useQuery.md) -- Have a read at [Why You Want React Query](../community/tkdodos-blog.md#23-why-you-want-react-query) from the Community Resources. +- See the Article [Why You Want React Query](https://tkdodo.eu/blog/why-you-want-react-query). [//]: # 'Materials' diff --git a/docs/framework/react/reference/queryOptions.md b/docs/framework/react/reference/queryOptions.md index c62abc669b..c5360510fb 100644 --- a/docs/framework/react/reference/queryOptions.md +++ b/docs/framework/react/reference/queryOptions.md @@ -27,6 +27,6 @@ You can generally pass everything to `queryOptions` that you can also pass to [` ## Further reading -To learn more about `QueryOptions`, have a look at [The Query Options API](../../community/tkdodos-blog.md#24-the-query-options-api) from the Community Resources. +To learn more about `QueryOptions`, have a look at [this article by TkDodo The Query Options API](https://tkdodo.eu/blog/the-query-options-api). [//]: # 'Materials' diff --git a/docs/framework/react/typescript.md b/docs/framework/react/typescript.md index 59f56d3268..6407b9973b 100644 --- a/docs/framework/react/typescript.md +++ b/docs/framework/react/typescript.md @@ -275,7 +275,6 @@ Read more about it in the [Disabling Queries](../guides/disabling-queries.md) gu ## Further Reading -For tips and tricks around type inference, have a look at [React Query and TypeScript](../community/tkdodos-blog.md#6-react-query-and-typescript) from -the Community Resources. To find out how to get the best possible type-safety, you can read [Type-safe React Query](../community/tkdodos-blog.md#19-type-safe-react-query). [The Query Options API](../community/tkdodos-blog.md#24-the-query-options-api) outlines how type inference works with the `queryOptions` helper function. +For tips and tricks around type inference, see the article [React Query and TypeScript](https://tkdodo.eu/blog/react-query-and-type-script). To find out how to get the best possible type-safety, you can read [Type-safe React Query](https://tkdodo.eu/blog/type-safe-react-query). [The Query Options API](https://tkdodo.eu/blog/the-query-options-api) outlines how type inference works with the `queryOptions` helper function. [//]: # 'Materials' diff --git a/docs/framework/react/videos.md b/docs/framework/react/videos.md deleted file mode 100644 index 7d305cf084..0000000000 --- a/docs/framework/react/videos.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -id: videos -title: Videos & Talks ---- - - - -[Click here to view the Repository used for the above presentation](https://github.com/tannerlinsley/react-query-blog-refactor-example) - - - - - - - - - - - - - - diff --git a/docs/framework/solid/community/community-projects.md b/docs/framework/solid/community/community-projects.md deleted file mode 100644 index c3e5a20546..0000000000 --- a/docs/framework/solid/community/community-projects.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -id: community-projects -title: Community Projects -ref: docs/framework/react/community/community-projects.md -replace: { 'React Query': 'TanStack Query' } ---- diff --git a/docs/framework/solid/community/tkdodos-blog.md b/docs/framework/solid/community/tkdodos-blog.md deleted file mode 100644 index 16c937b2ae..0000000000 --- a/docs/framework/solid/community/tkdodos-blog.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -id: tkdodos-blog -title: TkDodo's Blog -ref: docs/framework/react/community/tkdodos-blog.md ---- diff --git a/docs/framework/vue/community/community-projects.md b/docs/framework/vue/community/community-projects.md deleted file mode 100644 index 9d3326c086..0000000000 --- a/docs/framework/vue/community/community-projects.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: community-projects -title: Community Projects ---- - -There are lots of community projects that build on top of Vue Query and use it to provide additional functionality or enhanced developer experience. Projects are listed in alphabetical order. If you have a project that you would like to add to this list, please open a PR! - -> Please note that these projects are entirely community maintained. If you have questions about these projects, please reach out to the project maintainers. - -## DevTools Browser Extensions - -Browser extensions for Chrome, Firefox, and Edge that provide devtools for TanStack Query, allowing you to inspect and debug queries, mutations, and cache state directly in browser DevTools. - -Links: - -- Chrome logo [Devtools for Chrome](https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai) -- Firefox logo [Devtools for Firefox](https://addons.mozilla.org/en-US/firefox/addon/tanstack-query-devtools/) -- Edge logo [Devtools for Edge](https://microsoftedge.microsoft.com/addons/detail/tanstack-query-devtools/edmdpkgkacmjopodhfolmphdenmddobj) - -## oRPC - -Easy to build APIs that are end-to-end type-safe and adhere to OpenAPI standards. - -Link: https://orpc.unnoq.com/docs/integrations/tanstack-query - -## Hey API - -The OpenAPI to TypeScript codegen. Generate clients, SDKs, validators, and more. - -Link: https://heyapi.dev/openapi-ts/plugins/tanstack-query - -## Query Key factory - -A library for creating typesafe standardized query keys, useful for cache management in `@tanstack/query` - -Link: https://github.com/lukemorales/query-key-factory - -## Model: Unified Data Source - -Zova provides the Model mechanism based on Vue Query in the MVC architecture, encapsulating unified data sources through Model, thereby standardizing the use of data, simplifying the code structure, and improving the maintainability of the code - -Link: https://github.com/cabloy/zova -Docs: https://zova.js.org/guide/techniques/model/introduction.html - -## Normy - -Automatic normalization and data updates for data fetching libraries - -Link: https://github.com/klis87/normy - -## Query Rewind - -Time travel and visualize state during development - -Link: https://reactqueryrewind.com/ diff --git a/docs/framework/vue/community/tkdodos-blog.md b/docs/framework/vue/community/tkdodos-blog.md deleted file mode 100644 index 16c937b2ae..0000000000 --- a/docs/framework/vue/community/tkdodos-blog.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -id: tkdodos-blog -title: TkDodo's Blog -ref: docs/framework/react/community/tkdodos-blog.md ---- diff --git a/docs/reference/QueryCache.md b/docs/reference/QueryCache.md index 2b3843cc1f..2bcf16705d 100644 --- a/docs/reference/QueryCache.md +++ b/docs/reference/QueryCache.md @@ -27,10 +27,11 @@ const query = queryCache.find(['posts']) Its available methods are: -- [`find`](#querycachefind) -- [`findAll`](#querycachefindall) -- [`subscribe`](#querycachesubscribe) -- [`clear`](#querycacheclear) +- [`queryCache.find`](#querycachefind) +- [`queryCache.findAll`](#querycachefindall) +- [`queryCache.subscribe`](#querycachesubscribe) +- [`queryCache.clear`](#querycacheclear) +- [Further reading](#further-reading) **Options** @@ -117,7 +118,6 @@ queryCache.clear() ## Further reading -To get a better understanding how the QueryCache works internally, have a look at [#18: Inside React Query -](../../framework/react/community/tkdodos-blog.md#18-inside-react-query) from the Community Resources. +To get a better understanding how the QueryCache works internally, have a look at [the Inside React Query article by TkDodo](https://tkdodo.eu/blog/inside-react-query). [//]: # 'Materials'