Comienza a usar Firebase SQL Connect

En esta guía de inicio rápido, se explica cómo poner en marcha Firebase SQL Connect para conectar tus apps web y para dispositivos móviles a una base de datos de PostgreSQL. Harás lo siguiente:

• Configura tu directorio de proyecto local de Firebase SQL Connect con VS Code y la CLI de Firebase.
• Genera esquemas, consultas y mutaciones de SQL Connect según las ideas de tu app en lenguaje natural.
• Usa los SDKs con tipado estricto en tus apps para ejecutar consultas y mutaciones de SQL Connect.
• Aprovisiona una instancia de Cloud SQL para PostgreSQL, un esquema de SQL Connect, consultas y mutaciones.

Configura el directorio del proyecto local

Puedes instalar herramientas de desarrollo locales para SQL Connect de dos maneras.

Instalación automática (macOS o Linux) Instalación manual (Windows)

1. En un directorio del proyecto, ejecuta el siguiente comando.

   La secuencia de comandos instala Firebase CLI y la extensión de VS Code de SQL Connect, y te guía por firebase init dataconnect para configurar tu proyecto. Si no tienes instalada la versión de escritorio de VS Code, la secuencia de comandos la abrirá en un navegador.

   curl -sL https://firebase.tools/init/dataconnect | editor=true bash

2. Para abrir la pantalla de la extensión de SQL Connect para VS Code, haz clic en el ícono de Firebase en el panel izquierdo de Visual Studio Code.

3. Haz clic en Iniciar emuladores para ejecutar el emulador con una base de datos local de PGlite.

Esquema de opiniones

Firebase SQL Connect usa GraphQL para definir tu modelo de datos. La directiva @table asigna un tipo de GraphQL a una tabla de PostgreSQL. Los campos del tipo se asignan a las columnas de PostgreSQL. Puedes definir relaciones entre tablas con campos que hagan referencia a otros tipos de @table, incluidas las relaciones de varios a varios con tablas de unión con claves primarias compuestas.

En la configuración predeterminada, puedes encontrar los archivos de esquema SQL Connect en el directorio dataconnect/schema/. Aquí hay dos tablas de ejemplo del esquema de plantilla de películas. Tu esquema puede ser diferente si usaste Gemini para generarlo.

type Movie @table {
  # Every table has an implicit primary key field that looks something like:
  #  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

type Review @table(key: ["movie", "user"]) {
  user: User!
  movie: Movie!
  rating: Int
  reviewText: String
  reviewDate: Date! @default(expr: "request.time")
}

Más información sobre los esquemas de SQL Connect

Desarrollar consultas y mutaciones

Firebase SQL Connect usa GraphQL para consultas y mutaciones. Los defines en archivos .gql y los llamas por nombre desde tu app. La sintaxis de GraphQL proporciona SDKs con tipos de datos definidos y una API flexible para recuperar los datos exactos que necesita tu app.

Ingresar datos en tu base de datos

Con el emulador en ejecución, puedes propagar datos iniciales. Puedes usar el archivo dataconnect/seed_data.gql proporcionado o escribir tus propias mutaciones.

Usa el botón de Code Lens Run (local) en VS Code para ejecutar las mutaciones y completar tu base de datos local de PGlite.

Revisa las consultas y mutaciones

En la configuración predeterminada, puedes encontrar las consultas y mutaciones de SQL Connect en el directorio dataconnect/example/.

Puedes consultar datos relacionales con precisión con consultas anidadas.

query ListMovies @auth(level: PUBLIC, insecureReason: "Anyone can list all movies and their reviews.") {
  movies {
    title imageUrl genre
    reviews_on_movie {
      rating reviewDate
      user { username }
    }
  }
}

SQL Connect te ayuda a compilar consultas y mutaciones seguras con Firebase Auth.

Para mantener la seguridad de tu app, las apps web y para dispositivos móviles solo pueden acceder a las consultas y mutaciones de SQL Connect con las directivas @auth. Las consultas y mutaciones pueden acceder de forma segura al UID de Firebase Auth con una expresión como {field}_expr: "auth.uid".

mutation AddReview($movieId: UUID!, $rating: Int!, $reviewText: String!) @auth(level: USER) {
  review_upsert(
    data: {
      userId_expr: "auth.uid"
      movieId: $movieId
      rating: $rating
      reviewText: $reviewText
    }
  )
}

Más información sobre las consultas de SQL Connect Más información sobre las mutaciones de SQL Connect Más información sobre la autenticación de SQL Connect

Genera consultas y mutaciones

No necesitas ser un experto en GraphQL para usar SQL Connect de manera eficaz. Puedes generar consultas y mutaciones de SQL Connect a partir de descripciones en lenguaje natural.

En cualquier archivo .gql, escribe # para iniciar un comentario y describir una consulta o mutación. Luego, usa el botón de Code Lens Generate/Refine Operation para generar la operación de GraphQL.

Nota: La generación de operaciones también está disponible en Firebase console y el servidor de MCP de Firebase.

Usa el SDK generado en tu app

firebase init dataconnect configura automáticamente SDKs con seguridad de tipos para las apps de tu proyecto. Si es necesario, puedes agregar el SDK de forma manual con el botón Add SDK to app en la extensión de VS Code de SQL Connect o ejecutando firebase init dataconnect:sdk.

Web

1. Agrega Firebase a tu app web.

2. En el archivo principal de tu app de React, haz lo siguiente:

   • Importa el SDK generado:

   // Update as needed with the path to your generated SDK.
   import { listMovies, ListMoviesData } from '@dataconnect/generated';
   

   • Instrumenta tu app para que se conecte al emulador de SQL Connect:

   import { connectDataConnectEmulator } from 'firebase/data-connect';
   
   const dataConnect = getDataConnect(connectorConfig);
   connectDataConnectEmulator(dataConnect, 'localhost', 9399);
   

   • Llama a los métodos SQL Connect.

   function App() {
     const [movies, setMovies] = useState<ListMoviesData['movies']>([]);
     useEffect(() => {
       listMovies.then(res => setMovies(res.data));
     }, []);
     return (
       movies.map(movie => <h1>{movie.title}</h1>);
     );
   }
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(<App />);
   

   Nota: En este ejemplo, la app de React llama a tu consulta con el SDK de Firebase para JavaScript. SQL Connect también proporciona vinculaciones especiales para trabajar con SQL Connect de forma asíncrona en React.

Swift

1. Agrega Firebase a tu app para iOS.

2. Para usar el SDK generado, configúralo como una dependencia en Xcode.

   En la barra de navegación superior de Xcode, selecciona File > Add Package Dependencies > Add Local y elige la carpeta que contiene el Package.swift generado.

3. En el delegado principal de tu app, haz lo siguiente:

   • Importa el SDK de SQL Connect y el SDK generado:

     import FirebaseDataConnect
     // Generated queries.
     // Update as needed with the package name of your generated SDK.
     import <CONNECTOR-PACKAGE-NAME>
     
     let connector = DataConnect.moviesConnector
     

   • Instrumenta tu app para que se conecte al emulador de SQL Connect:

     // Connect to the emulator on "127.0.0.1:9399"
     connector.useEmulator()
     
     // (alternatively) if you're running your emulator on non-default port:
     // connector.useEmulator(port: 9999)
     

   • Llama a los métodos SQL Connect:

     struct ListMovieView: View {
         @StateObject private var queryRef = connector.listMovies.ref()
     
         var body: some View {
             VStack {
                 Button {
                     Task {
                         do {
                             try await refresh()
                         } catch {
                             print("Failed to refresh: \(error)")
                         }
                     }
                 } label: {
                     Text("Refresh")
                 }
     
                 // use the query results in a view
                 ForEach(queryRef.data?.movies ?? []) { movie in
                     Text(movie.title)
                 }
                 
             }
         }
     }
     
     @MainActor
     func refresh() async throws {
         _ = try await queryRef.execute()
     }
     
     struct ContentView_Previews: PreviewProvider {
         static var previews: some View {
             ListMovieView()
         }
     }
     

Kotlin para Android

1. Agrega Firebase a tu app para Android.

2. Para usar el SDK generado, configura SQL Connect como una dependencia en Gradle.

   Actualiza plugins y dependencies en tu app/build.gradle.kts.

   plugins {
     // Use whichever versions of these dependencies suit your application.
     // The versions shown here were the latest as of March 14, 2025.
     // Note, however, that the version of kotlin("plugin.serialization") must,
     // in general, match the version of kotlin("android").
     id("com.android.application") version "8.9.0"
     id("com.google.gms.google-services") version "4.4.2"
     val kotlinVersion = "2.1.10"
     kotlin("android") version kotlinVersion
     kotlin("plugin.serialization") version kotlinVersion
   }
   
   dependencies {
     // Use whichever versions of these dependencies suit your application.
     // The versions shown here were the latest versions as of March 14, 2025.
     implementation("com.google.firebase:firebase-dataconnect:16.0.0-beta04")
     implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.10.1")
     implementation("org.jetbrains.kotlinx:kotlinx-serialization-core:1.7.3")
   
     // These dependencies are not strictly required, but will very likely be used
     // when writing modern Android applications.
     implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:1.9.0")
     implementation("androidx.appcompat:appcompat:1.7.0")
     implementation("androidx.activity:activity-ktx:1.10.1")
     implementation("androidx.lifecycle:lifecycle-viewmodel-ktx:2.8.7")
     implementation("com.google.android.material:material:1.12.0")
   }
   

3. En la actividad principal de tu app, haz lo siguiente:

   • Obtén una instancia de conector de tu SDK generado:

   private val connector = com.myapplication.MoviesConnector.instance
   

   • Instrumenta tu app para que se conecte al emulador de SQL Connect:

   private val connector = com.myapplication.MoviesConnector.instance
     .apply {
       // Connect to the emulator on "10.0.2.2:9399" (default port)
       dataConnect.useEmulator()
   
       // (alternatively) if you're running your emulator on non-default port:
       // dataConnect.useEmulator(port = 9999)
     }
   

   • Llama a los métodos SQL Connect.

   class MainActivity : AppCompatActivity() {
   
     override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
       val textView: TextView = findViewById(R.id.text_view)
   
       lifecycleScope.launch {
         lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) {
           
           val result = connector.listMovies.runCatching { execute { } }
           
           val newTextViewText = result.fold(
             onSuccess = {
               val titles = it.data.movies.map { it.title }
               "${titles.size} movies: " + titles.joinToString(", ")
             },
             onFailure = { "ERROR: ${it.message}" }
           )
           textView.text = newTextViewText
         }
       }
     }
   }
   

Flutter

1. Agrega Firebase a tu app de Flutter.
2. Instala la CLI de flutterfire dart pub global activate flutterfire_cli.
3. Ejecuta flutterfire configure.

4. En la función principal de tu app, haz lo siguiente:

   • Importa el SDK generado:

   // Generated queries.
   // Update as needed with the path to your generated SDK
   
   import 'movies_connector/movies.dart';
   

   • Instrumenta tu app para que se conecte al emulador de SQL Connect:

   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     await Firebase.initializeApp(
       options: DefaultFirebaseOptions.currentPlatform,
     );
     
     MoviesConnector.instance.dataConnect
         .useDataConnectEmulator(Uri.base.host, 443, isSecure: true);
     
     runApp(const MyApp());
   }
   

   • Llama a los métodos SQL Connect.

   class MyApp extends StatelessWidget {
     const MyApp({super.key});
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
           home: Scaffold(
               body: Column(children: [
         ConstrainedBox(
           constraints: const BoxConstraints(maxHeight: 200),
           child: FutureBuilder(
               future: MoviesConnector.instance.listMovies().execute(),
               builder: (context, snapshot) {
                 if (snapshot.connectionState == ConnectionState.done) {
                   return ListView.builder(
                     scrollDirection: Axis.vertical,
                     itemBuilder: (context, index) => Card(
                         child: Text(
                       snapshot.data!.data.movies[index].title,
                     )),
                     itemCount: snapshot.data!.data.movies.length,
                   );
                 }
                 return const CircularProgressIndicator();
               }),
         )
       ])));
     }
   }
   

Implementar en producción

Para implementar tu esquema, consultas y mutaciones en producción, sigue estos pasos:

1. Revisa la información sobre los precios y la prueba sin costo en la página Precios. Es posible que tu proyecto cumpla con los requisitos para una de las opciones de prueba de Firebase SQL Connect.

2. Haz clic en el botón Implementar en producción en la extensión de VS Code de SQL Connect o ejecuta lo siguiente en una terminal:

   firebase deploy --only dataconnect
   

   Después de la implementación, puedes ver tu esquema y ejecutar consultas y mutaciones en la consola de Firebase (ve a Bases de datos y almacenamiento > SQL Connect).

   Sugerencia: Puedes configurar la región de Cloud SQL, el nombre de la instancia y el nombre de la base de datos de PostgreSQL en dataconnect.yaml antes de la implementación.

Más información sobre dataconnect.yaml Más información sobre cómo funciona SQL Connect con Cloud SQL

Próximos pasos

Ahora que completaste la guía de inicio rápido, estos son algunos de los próximos pasos:

• Explora un repositorio de apps de inicio rápido y compila una app de SQL Connect con todas las funciones siguiendo nuestro codelab para la Web, codelab para iOS o codelab para Android.
• Agrega datos a tu base de datos, inspecciona tus esquemas y supervisa tu servicio de SQL Connect en la consola de Firebase.
• Configura el servidor de MCP de Firebase con herramientas para desarrolladores potenciadas por IA, como Antigravity, Claude Code o Cursor.
• Obtén más información sobre el desarrollo de esquemas, consultas y mutaciones.
• Obtén más información sobre cómo SQL Connect administra el esquema de PostgreSQL.
• Obtén más información sobre los SDK de cliente para Web, Android, iOS y Flutter, así como los SDK de Admin para Node.js.