--- title: Angular and React Bindings for Data Connect | daily.dev description: Firebase Data Connect now offers preview bindings for Angular and React that integrate with TanStack Query (v5) to reduce boilerplate around data fetching,... canonical: https://daily.dev/posts/angular-and-react-bindings-for-data-connect-qnb8vi8l8 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Angular and React Bindings for Data Connect | daily.dev og:description: Firebase Data Connect now offers preview bindings for Angular and React that integrate with TanStack Query (v5) to reduce boilerplate around data fetching,... og:url: https://daily.dev/posts/angular-and-react-bindings-for-data-connect-qnb8vi8l8 og:image: https://api.daily.dev/og/posts/qnB8Vi8L8.png og:image:alt: Angular and React Bindings for Data Connect og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Angular and React Bindings for Data Connect **[Firebase](https://daily.dev/sources/firebase-blog)** · 6 min read · 0 upvotes · 0 comments ## Summary Firebase Data Connect now offers preview bindings for Angular and React that integrate with TanStack Query (v5) to reduce boilerplate around data fetching, caching, and state management. Enabling react: true or angular: true in connector.yaml and running firebase dataconnect:sdk:generate produces type-safe hooks (React) or injectors (Angular) derived from GraphQL schema queries and mutations. The bindings provide end-to-end type safety, automatic caching, request deduplication, and background updates, letting developers use familiar React Hooks or Angular Signals patterns instead of manually wrapping generated SDK functions. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I generate type-safe React hooks for Firebase Data Connect queries? Set react: true under javascriptSdk in connector.yaml, then run firebase dataconnect:sdk:generate. This produces type-safe hooks like useGetActorById that wrap Data Connect operations with TanStack Query's useQuery and useMutation, returning standard TanStack Query result objects with loading, error, and data states. Install @tanstack/react-query and @tanstack-query-firebase/react as dependencies. _Developers wiring up Firebase Data Connect follow guides like this via daily.dev to skip trial and error._ ### How does Firebase Data Connect integrate with TanStack Query in Angular? Setting angular: true in connector.yaml and running the SDK generator produces injectors, such as injectListMovies, that return TanStack Query Result Signals with properties like data(), error(), and isPending(). Developers install @tanstack/angular-query and @tanstack-query-firebase/angular, then provide a QueryClient via provideTanStackQuery in app.config.ts to use these signals directly in component templates. _Angular developers evaluating data-fetching setups track library integrations like this on daily.dev._ ## Similar posts on daily.dev - [A gentle introduction to TanStack Query](https://daily.dev/posts/a-gentle-introduction-to-tanstack-query-e5yjmxkk9) · Neciu Dan · 79 upvotes · 5 comments - [Angular Material Dialogs Now Support Real Component Bindings](https://daily.dev/posts/angular-material-dialogs-now-support-real-component-bindings-3zdypvwvu) · ITNEXT · 0 upvotes · 0 comments - [Intro to TanStack DB: Reactive Data Layer for Modern Web Apps](https://daily.dev/posts/intro-to-tanstack-db-reactive-data-layer-for-modern-web-apps-kdplkf2xf) · Telerik · 4 upvotes · 0 comments - [TanStack dominance intensifies](https://daily.dev/posts/tanstack-dominance-intensifies-raf2r08in) · Bytes by ui.dev · 16 upvotes · 3 comments --- Tags: [#react](https://daily.dev/tags/react), [#angular](https://daily.dev/tags/angular), [#graphql](https://daily.dev/tags/graphql), [#firebase](https://daily.dev/tags/firebase) [View this post on daily.dev](https://daily.dev/posts/angular-and-react-bindings-for-data-connect-qnb8vi8l8) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Angular and React Bindings for Data Connect","url":"https://daily.dev/posts/angular-and-react-bindings-for-data-connect-qnb8vi8l8","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/angular-and-react-bindings-for-data-connect-qnb8vi8l8"},"datePublished":"2026-08-23T12:20:31.246Z","dateModified":"2026-08-23T12:41:22.849Z","description":"Firebase Data Connect now offers preview bindings for Angular and React that integrate with TanStack Query (v5) to reduce boilerplate around data fetching,...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/460717ddeb684bcb5a4c7a1ccc8ad232?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/460717ddeb684bcb5a4c7a1ccc8ad232?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Firebase","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Firebase","logo":"https://media.daily.dev/image/upload/s--i395oqZH--/f_auto,q_auto/v1787487448/logos/firebase-blog?_a=BAMAMicg0","url":"https://daily.dev/sources/firebase-blog"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/angular-and-react-bindings-for-data-connect-qnb8vi8l8","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,angular,graphql,firebase","timeRequired":"PT6M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Firebase","item":"https://daily.dev/sources/firebase-blog"},{"@type":"ListItem","position":3,"name":"Angular and React Bindings for Data Connect"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/angular-and-react-bindings-for-data-connect-qnb8vi8l8#faq","mainEntity":[{"@type":"Question","name":"How do I generate type-safe React hooks for Firebase Data Connect queries?","acceptedAnswer":{"@type":"Answer","text":"Set react: true under javascriptSdk in connector.yaml, then run firebase dataconnect:sdk:generate. This produces type-safe hooks like useGetActorById that wrap Data Connect operations with TanStack Query's useQuery and useMutation, returning standard TanStack Query result objects with loading, error, and data states. Install @tanstack/react-query and @tanstack-query-firebase/react as dependencies. Developers wiring up Firebase Data Connect follow guides like this via daily.dev to skip trial and error."}},{"@type":"Question","name":"How does Firebase Data Connect integrate with TanStack Query in Angular?","acceptedAnswer":{"@type":"Answer","text":"Setting angular: true in connector.yaml and running the SDK generator produces injectors, such as injectListMovies, that return TanStack Query Result Signals with properties like data(), error(), and isPending(). Developers install @tanstack/angular-query and @tanstack-query-firebase/angular, then provide a QueryClient via provideTanStackQuery in app.config.ts to use these signals directly in component templates. Angular developers evaluating data-fetching setups track library integrations like this on daily.dev."}}]} ```