Comienza a usar Firebase Data Connect

En esta guía de inicio rápido, se explica cómo comenzar a usar Firebase Data 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 local del proyecto Firebase Data Connect con VS Code y Firebase CLI.
  • Genera esquemas, consultas y mutaciones de Data Connect basados en tus ideas de apps en lenguaje natural.
  • Usa los SDKs con escritura segura en tus apps para ejecutar consultas y mutaciones de Data Connect.
  • Aprovisiona una instancia de Cloud SQL para PostgreSQL, un esquema de Data Connect, consultas y mutaciones (requiere un plan de Blaze).

Configura el directorio del proyecto local

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

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

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

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

  2. Haz clic en el ícono de Firebase en el panel izquierdo de Visual Studio Code para abrir la pantalla de la extensión Data Connect de VS Code.

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

Revisa el esquema

Firebase Data 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 mapa de tipos se asignan a las columnas de PostgreSQL. Puedes definir relaciones entre tablas usando campos que hacen referencia a otros tipos de @table, incluidas las relaciones de varios a varios con tablas de unión y claves primarias compuestas.

En la configuración predeterminada, puedes encontrar los archivos de esquema Data Connect en el directorio dataconnect/schema/. A continuación, se muestran dos tablas de ejemplo del esquema de la 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 Data Connect

Desarrolla consultas y mutaciones

Firebase Data Connect usa GraphQL para las consultas y las mutaciones. Estos se definen en archivos .gql y se llaman por su nombre desde tu app. La sintaxis de GraphQL proporciona SDKs con escritura segura y una API flexible para recuperar los datos exactos que necesita tu app.

Propaga datos en tu base de datos

Con el emulador en ejecución, puedes propagarlo con 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.

Botón Run de CodeLens para Firebase Data Connect

Revisa las consultas y mutaciones

En la configuración predeterminada, puedes encontrar las consultas y mutaciones de Data 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 }
    }
  }
}

Data Connect te ayuda a crear 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 Data Connect con directivas de @auth. Las consultas y las 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 Data Connect Más información sobre las mutaciones de Data Connect Más información sobre la autenticación de Data Connect

Genera consultas y mutaciones

No es necesario que seas experto en GraphQL para usar Data Connect de manera eficaz. Puedes generar consultas y mutaciones de Data 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.

Botón Generate de CodeLens para Firebase Data Connect

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 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 Data Connect:
    import { connectDataConnectEmulator } from 'firebase/data-connect';

const dataConnect = getDataConnect(connectorConfig);
connectDataConnectEmulator(dataConnect, 'localhost', 9399);
    • Llama a los métodos Data 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 />);

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 la app, haz lo siguiente:

    • Importa el SDK de Data Connect y el SDK que generaste:

      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 Data 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 Data 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 Android

  1. Agrega Firebase a tu app para Android.

  2. Para usar el SDK generado, configura Data 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 del conector desde el SDK que generaste:
    private val connector = com.myapplication.MoviesConnector.instance
    • Instrumenta tu app para que se conecte al emulador de Data 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 Data 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 Data 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 Data 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. Actualiza el proyecto de Firebase para usar el plan Blaze.

  2. Haz clic en el botón Deploy to production en la extensión Data Connect de VS Code o ejecuta el siguiente comando en una terminal:

    firebase deploy --only dataconnect

    Después de la implementación, visita la consola de Firebase para ver tu esquema y ejecutar consultas y mutaciones.

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

Próximos pasos

Ahora que completaste la guía de inicio rápido, puedes probar los siguientes pasos: