Data Connect Queries: From Definitions to Client Code in Firebase: Web Architecture & Implementation Guide

Original: https://codingcat.dev/post/firebase-2025-05-dataconnect-queries-defs-to-client-code

If you have ever watched an AI coding agent hallucinate deprecated Firebase v8 syntax or deploy wide-open Firestore rules, you know that raw LLM prompts are not enough for production backends. Following the announcement of Data Connect Queries: From Definitions to Client Code by Andrea Wu on the Official Firebase Blog (2025-05-01), here is our hands-on CodingCat.dev breakdown of what actually shipped, how it works under the hood, and how we wire it into production TypeScript, Next.js, Astro, SvelteKit, React, and Angular applications. Note: Firebase Data Connect has been renamed to SQL Connect. Learn more in the SQL Connect announcement.

As a Google Developer Expert (GDE) for Firebase and Senior Solutions Engineer at CodingCat.dev, I evaluate every Firebase update through one lens: does it reduce boilerplate while keeping our runtime security and cloud bills predictable? Instead of relying on stale training weights, wiring up the Model Context Protocol (MCP) and structured Firebase agent skills gives your IDE or CLI direct, schema-aware tools to provision resources, inspect security rules, and run deterministic CLI deployments.

AJ Pro-Tip from Alex: Never let an autonomous coding agent push Firestore or Data Connect rules straight to production without a gate. Always require the agent to run your test suite against the Firebase Local Emulator Suite first, and audit every generated rule for strict request.auth.uid ownership checks.

A big part of any database solution is seamlessly getting information that you may need for your app. With Data Connect, you set up schemas to model your data, and then you make queries on that data. This blog post will dive into queries, and we’ll assume that you are familiar with schemas. Feel free to read the Data Connect ** documentation** if you need a reminder.

We’ll use the movie review app example you might already know from the documentation and our previous deep-dive blog posts.

A Data Connect query is a GraphQL query: an operation that asks about specific ** fields** from a backend datastore defined by your schema. You write queries in GraphQL, and you can use queries:

These are the parts of a query definition in GraphQL:

Here is an example to list all movies by genre:

query type definition, letting GraphQL know this is a queryListMoviesByGenre operation (query) name$genre operation argument of the String type. Every query argument requires a type declaration, a built-in Movie_Key (which is a @auth, which specifies only logged-in users, can execute this query. For this movie data that’s appropriate for public viewing, the PUBLIC level is sufficient authorization. Now that we know how to declare a query, what does a query in its entirety look like? It is broken down into the following parts:

Here is an example query to get all movies of a particular genre ordered by highest rating to lowest:

query 
  mostPopular: 
     where: { genre: { eq: $genre } }, orderBy: { rating: DESC }
  ) {
    id
    title
    genre
    description
  }
}

The first line is described in the “Declaring a Query” section. Let's break down the other important pieces:

movies specifies the table in the schema from which the query needs to get datawhere and orderBy are filters applied to retrieving the dataid, title, genre, and description are the fields to be returned by this query for all of the movies that fit the genre Let’s talk about directives - like @auth. Data Connect has three directives for queries to define their behavior:

@check verifies that specified fields are present in query results@redact omits query results from the client’s response For more information, there are more in-depth descriptions and resources in the documentation about directives for queries.

When you create a schema, Data Connect’s local tooling automatically generates fields based on the types and type relationships in your schema. These generated fields are necessary for writing your own queries to be deployed and used in your client code, or run ad hoc in privileged environments

As an example of a generated field, say the Movie type is defined as:

type
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  releaseYear: Int @index
  genre: String @col(dataType: "varchar(30)")
  rating: Int
  description: String
}

With the schema definition, Data Connect generates fields for single-table use cases, as seen in query.gql. It creates a field to get:

Movie table, given the movie in this case. (In both of these tables, a directive that this blog post didn’t cover is @fdc_generated - you will never be writing this on your own, so don’t worry too much about it. It says which table the generated field is coming from and whether it’s querying for a single record or multiple records).

Data Connect also generates fields for multi-table, relational operations with explicit names. This will be in a future blog post, as there is a lot to cover.

With the Data Connect Visual Studio Code extension, there are several ways to see and use these generated fields after you begin editing your schema:

dataconnect/.dataconnect/main/query.gql Once you deploy your schema, you can view the generated fields with reference documentation in the Firebase console and use the data tab to prototype queries.

With the generated fields, you can now write queries to retrieve the information needed for your app. Your client code can only use these queries and not the generated fields. Additionally, the client only gets to see the fields selected in queries. If there’s a secret field that you don’t want clients to see, then clients cannot see it since they don’t have direct access to the database.

For example, you can use the generated movie field to create your own query, where you pass in the movie id:

query 
  movie
    id
    title
    imageUrl
    genre
  }
}

For listing movies, you can use the generated movies field:

query ListMovies @
  movies {
    id
    title
    imageUrl
    genre
  }
}

Now that you’ve defined your queries, you’re ready to use them in your app code. How do you do that? Data Connect automatically generates SDKs for you to use, bridging the gap between your queries defined in GraphQL and your application platform. You need to set up these generated SDKs, and then you can call the generated functions in your app code. Feel free to read about what generated SDKs are and how to use them in Data Connect.

Whether we are deploying on Firebase App Hosting, Cloudflare Workers, or Vercel, shipping SQL features to production requires defense-in-depth across three layers:

Accelerate your full-stack web and AI development by pairing Data Connect Queries: From Definitions to Client Code with strict Security Rules, Firebase App Check, and local emulator testing. Come tell us on X (@CodingCatDev) and ** LinkedIn (CodingCat.dev)** how you are using Firebase in your stack, and subscribe to the ** CodingCat.dev YouTube Channel** so you don't miss what we build next!

Want to see how we architect and debug Firebase web applications live? Watch our related CodingCat.dev session Firebase SQL with Data Connect below, and make sure to ** Subscribe to CodingCat.dev on YouTube** for weekly full-stack web and AI deep dives:

Data Connect Queries: From Definitions to Client Code (announced 2025-05-01 by the Firebase team) enhances the platform for Firebase, Google Cloud, Web Dev, SQL, TypeScript, Security workloads. Note: Firebase Data Connect has been renamed to SQL Connect. Learn more in the SQL Connect announcement. Developers can review the primary announcement on the Firebase Blog alongside our implementation patterns and production checklist above.

Web developers can integrate these features using the modular Firebase JavaScript/TypeScript SDK, Firebase Data Connect web bindings, and Firebase App Hosting. Always pair client-side SDK initialization with Firebase App Check and strict Security Rules, and test locally with the Firebase Local Emulator Suite before deploying.

You can watch our hands-on Firebase video walkthroughs on the CodingCat.dev YouTube Channel, including ** Firebase SQL with Data Connect**, and follow us on ** X (@CodingCatDev)** for weekly full-stack tutorials.