Import Data To Firestore Via API With Rowy (2023): A Tutorial With Code Snippets

APIs make up 80% of all Internet traffic: you'll probably need to use one if you want to build an app in 2023. While importing API data can be hard to do if you host your own backend services, solutions exist to make interacting with APIs easy and fun. That's where Rowy comes in.

Let's see how to use and store API data in Firestore with Rowy in this tutorial, without losing time wrestling with web server and database configurations.

Create A New Rowy Table

First, you'll need to create a Rowy account. It only takes a few minutes to connect Rowy and Firestore with the step-by-step guided process, so come back after the installation while we wait for you. You can also self-host Rowy using the open-source version on Github.

We want to re-create the Countries demo table you can find and copy in Rowy's demo table page:

So first we create a new empty table called Countries, and then we add the following columns:

• name: a country name (short text type)
• capital: the country's capital
• code: the country code
• and so on with continent, currency, dial code, flag emoji, and flag image (image file type).

We obtain a table that's ready to store our API data:

Using Derivative Columns To Import API Data

Importing data from an API implies we need to send an HTTP request to the service in question. Fortunately, Rowy provides derivative columns to write custom scripts based on other columns, in a low-code fashion without having to worry about servers or environment configurations.

Let's say we want to generate a cover image of the country row that matches the name and its capital, we would have the following script:

const unsplashSecret = await rowy.secrets.get("unsplash")

const res = await fetch(
    `https://api.unsplash.com/search/photos?page=1&query=${row.capital}%20${row.name}&client_id=${unsplashSecret}`
).then(res => res.json()).then(res => res.results[0])

const url = res.urls.small
const img = await rowy.storage.upload.url(url, {
    fileName: row.name + ".jpg",
    folderPath: ref.path,
})

In this example, we access Unsplash's API via its API token and store the cover image in Google Storage. Rowy provides native access to the fetch package to perform HTTP requests, as well as a Google Storage object to upload files.

You can specify the full derivative script in the column's settings:

const derivative: Derivative = async ({ row, ref, db, storage, auth }) => {
    const unsplashSecret = await rowy.secrets.get("unsplash")

    const res = await fetch(
        `https://api.unsplash.com/search/photos?page=1&query=${row.capital}%20${row.name}&client_id=${unsplashSecret}`
    ).then(res => res.json()).then(res => res.results[0])

    const url = res.urls.small
    const img = await rowy.storage.upload.url(url, {
        fileName: row.name + ".jpg",
        folderPath: ref.path,
    })
}

And that's how you obtain the original demo.

Check Out More Demos

Hope you enjoyed it. You can find 24 other demos and examples on how to use Rowy to build powerful apps, like Face Restoration with Replicate API, image generation with Stable Diffusion, or even emojify with GPT-3. Don't hesitate to reach out if you're unsure how to build something, we'll be happy to help.