In this quickstart, you will learn how to build Firebase Data Connect in your application locally without setting up a production SQL instance.
- Add Firebase Data Connect to your Firebase project.
- Set up a development environment including a Visual Studio Code extension to work with a local instance.
- Then we will show you how to:
- Create a schema for a movie app
- Define queries and mutations that will be used in your app
- Test your queries and mutations with sample data against a local emulator
- Generate strongly typed SDKs and use them in your app
- Deploy your final schema, queries and data to the cloud (Optional, Blaze plan needed).
Prerequisites
To use this quickstart, you'll need the following.
- Linux, macOS, or Windows
- Visual Studio Code
- Install Node.js using nvm-windows for Windows or nvm for macOS or Linux.
- If you haven't already, create a Firebase project in the Firebase console.
Set up the development environment
You will need Visual Studio Code to manage the schema and define queries which will be used in your application, and a strongly typed SDK will be automatically generated for you:
- Create a new directory for your local project.
- Open VS Code in the new directory.
- Install the Firebase Data Connect extension from the Visual Studio Code Marketplace.
Set up your project directory
To set up your local project, initialize your project directory. In the VS Code left-hand panel, click the Firebase icon to open the Data Connect VS Code extension UI:
- Click the Sign in with Google button.
- Click the Connect a Firebase project button and select the project you created earlier in the console.
- Click the Run firebase init button.
Click the Start emulators button.
Create a schema
In your Firebase project directory, in the /dataconnect/schema/schema.gql
file
, start defining a GraphQL schema about movies.
Movie
In Data Connect, GraphQL fields are mapped to columns. Movie has id
,
title
, imageUrl
and genre
. Data Connect recognizes primitive
data types: String
and UUID
.
Copy the following snippet or uncomment the corresponding lines in the file.
# By default, a UUID id key will be created by default as primary key.
# If you want to specify a primary key, say title, which you can do through
# the @table(key: "title") directive
type Movie @table {
id: UUID! @default(expr: "uuidV4()")
title: String!
imageUrl: String!
genre: String
}
MovieMetadata
Copy the following snippet or uncomment the corresponding lines in the file.
# Movie - MovieMetadata is a one-to-one relationship
type MovieMetadata @table {
# This time, we omit adding a primary key because
# you can rely on Data Connect to manage it.
# @unique indicates a 1-1 relationship
movie: Movie! @unique
# movieId: UUID <- this is created by the above reference
rating: Float
releaseYear: Int
description: String
}
Notice that the movie
field is mapped to a type of Movie
.
Data Connect understands that this is a relationship between Movie
and MovieMetadata
and will manage this relationship for you.
Learn more about Data Connect schemas in the documentation
Add data to your tables
In the VS Code editor panel, you will see CodeLens buttons appear over the
GraphQL types in /dataconnect/schema/schema.gql
. You can use the Add data
and Run (Local) buttons add data to your local database.
To add records to the Movie
, and MovieMetadata
tables:
- In
schema.gql
, click the Add data button above theMovie
type declaration.
- In the
Movie_insert.gql
file that is generated, hard code data for the three fields. - Click the Run (Local) button.
- Repeat the previous steps to add a record to the
MovieMetadata
table, supplying theuid
of your Movie in themovie
field, as prompted in the generatedMovieMetadata_insert
mutation.
To quickly verify data was added:
- Back in
schema.gql
, click the Read data button. - In the resulting
Movie_read.gql
file, click the Run (Local) button to execute the query.
Learn more about Data Connect mutations in the documentation
Define your query
Now the fun part: let's define the queries you will need in your application. As a developer, you're accustomed to writing SQL queries rather than GraphQL queries, so this can feel a bit different at first. However, GraphQL is far more terse and type-safe than raw SQL. And our VS Code extension eases the development experience.
Start editing the /dataconnect/connector/queries.gql
file. If you want
to get all movies, use a query like this.
# File `/dataconnect/connector/queries.gql`
# @auth() directives control who can call each operation.
# Anyone should be able to list all movies, so the auth level is set to PUBLIC
query ListMovies @auth(level: PUBLIC) {
movies {
id
title
imageUrl
genre
}
}
Execute the query using the nearby CodeLens button.
A really exciting feature here is the ability to treat the database's
relationships like a graph. Since a MovieMetadata has a movie
field that
references a movie, you can nest into the field and get information about the
movie info back. Try adding the generated type movieMetadata_on_movie
to the
ListMovies query.
query ListMovies @auth(level: PUBLIC) {
movies {
id
title
imageUrl
genre
movieMetadata_on_movie {
rating
}
}
}
Learn more about Data Connect queries in the documentation
Generate SDKs and use them in your app
In the VS Code left-hand panel, click the Firebase icon to open the Data Connect VS Code extension UI:
- Click the Add SDK to app button.
In the dialog that appears, select a directory containing code for your app. Data Connect. SDK code will be generated and saved there.
Select your app platform, then note that SDK code is immediately generated in your selected directory.
Learn how to use the generated SDK to call queries and mutations from client apps (web, Android, iOS, Flutter).
Deploy your schema and query to production
Once you have your local setup on your app, now you can deploy your schema, data, and queries to the cloud. You will need Blaze plan to set up a Cloud SQL instance.
Navigate to Data Connect section of the Firebase console and create a free trial Cloud SQL instance.
In the VS Code integrated Terminal, run firebase init dataconnect and select the Region/Service ID you just created on the console.
Select "Y" when prompted with "File dataconnect/dataconnect.yaml already exists, Overwrite?".
In the Data Connect VS Code Extension UI, click the Deploy to production button.
Once deployed, go to the Firebase console to verify the schema, operations and data has been uploaded to the cloud. You should be able to view the schema, and run your operations on the console as well. The Cloud SQL for PostgreSQL instance will be updated with its final deployed generated schema and data.
Next steps
Review your deployed project and discover more tools:
- Add data to your database, inspect and modify your schemas, and monitor your Data Connect service in the Firebase console.
Access more information in the documentation. For example, since you've completed the quickstart:
- Learn more about schema, query and mutation development
- Learn about generating client SDKs and calling queries and mutations from client code for web, Android, and iOS, and Flutter.