Generated SDKs for Data Connect

If you’ve explored Firebase Data Connect, you’ve likely used GraphQL to model your data and define CRUD operations. To actually get data and make changes from your client app, GraphQL needs to be translated into the language for the platform you’re developing. Data Connect does this automatically; it generates strongly-typed SDKs for web, Android, iOS, and Flutter based on the operations you have defined.

How does it work?

Firebase Data Connect client SDKs let you call your server-side queries and mutations directly from a Firebase app. As you design the schemas, queries, and mutations and deploy them to the Data Connect service, Data Connect automatically generates custom SDK code for you to use in your client logic.

When deployed, Data Connect operations are stored on the server, which means you need to deploy corresponding client-side changes to avoid breaking existing users; Data Connect queries and mutations are not submitted by client code and executed on the server. To help with this process, Data Connect tooling lets you prototype your server-deployed schemas, queries and mutations while generating client-side SDKs automatically. When you’ve iterated updates to your service and client apps, both server- and client-side updates are ready to deploy.

I defined schema, queries, and mutations - what’s next?

Even though generating the SDKs is automatic, you’ll have to set it up. After you Get started with Data Connect, there is a button to configure your generated SDKs in the Firebase tab in VS code.

Configure generated SDK in VS code
Configure generated SDK in VS code

Clicking on “Configure Generated SDK” opens a pop-up window for you to choose the desired location for the generated SDK files. The command line then asks for which platform and connector you want to set up the generated SDK. Data Connect writes a new config file, dataconnect/connector/connector.yaml, in the directory you picked before. A package name gets included in the file, and you can change it if you want to.

In case you’re not using VS code, you can manually do the setup inside the dataconnect/connector/connector.yaml file. Initialize the SDK for the platform of your choice: web, Android, iOS, or Flutter. Designate the location of the generated SDKs, and you can choose the SDK package name or use the default one. As a note: if you’re working on a web app, you need to configure your paths relative to node_modules.

After this setup whether through VS code tooling or on your own in the file, the designated location for your generated SDKs has a new folder and other files. Inside the main file (index.d.ts as an example for web), there are now functions that you can call based on the queries and mutations you defined before. They are all typed, and the types are defined in the same file as well. All automatic!

If you’re prototyping interactively with the Data Connect VS Code extension and its Data Connect emulator, SDK source files are automatically generated and updated while you modify .gql files defining schemas, queries, and mutations.

In other scenarios, if you’re using the Data Connect emulator from the Firebase CLI, you can set a watch on .gql updates and also have SDK sources automatically updated. Alternatively, you can use the CLI to regenerate SDKs whenever .gql files are changed: firebase dataconnect:sdk:generate --watch.

Using generated SDKs

You can now use all of the functions that were automatically generated in your client-side app! For each platform, you need to import the functions from the package you defined, and you can call them directly to get or change the data in your database. Each function will return the type of data defined in your query and mutation, and the data will be typed. Data Connect also supports asynchronous calls on these functions, so you can watch for any changes in data and update your client code accordingly. You can take a look at more details and examples for web subscriptions, Android flows, iOS observables, and Flutter subscriptions.

Core SDKs vs Generated SDKs

You may have noticed that your client-side app may need to import or include Firebase’s Data Connect SDK that is not your generated SDKs (which come from your named package in connector.yaml). The core SDKs are the same for all those who use Data Connect and will not change as you build your app - your typical SDK. On the contrary, generated SDKs are unique to your app and are based on what you define in the .gql files.

Resources

The Data Connect documentation has code samples for every platform, and you can also check out other deep-dive articles. As it’s a new product, we’d love to hear your opinion and any feature requests you have. If you haven’t already, give Data Connect a try today - we can’t wait to see what you build with it!