@ascorbic/airtable-loader
v1.0.4
Published
This package provides a Airtable loader for Astro. It allows you to load records from an Airtable base and use them as content in your Astro project.
Downloads
244
Readme
Astro Airtable loader
This package provides a Airtable loader for Astro. It allows you to load records from an Airtable base and use them as content in your Astro project.
Installation
npm install @ascorbic/airtable-loader
Usage
This package requires Astro 4.14.0 or later. You must enable the experimental content layer in Astro unless you are using version 5.0.0-beta or later. You can do this by adding the following to your astro.config.mjs
:
export default defineConfig({
// ...
experimental: {
contentLayer: true,
},
});
You will need to create an Airtable personal access token. You can create one here.
You should ensure that this token has access to the base that you want to use, and has the following scopes:
data.records:read
schema.bases:read
You can then use the feed loader in your content collection configuration:
// src/content/config.ts
import { defineCollection } from "astro:content";
import { airtableLoader } from "@ascorbic/airtable-loader";
const launches = defineCollection({
loader: airtableLoader({
base: import.meta.env.AIRTABLE_BASE,
table: "Product Launches",
}),
});
export const collections = { launches };
You can then use these like any other content collection in Astro. The data is type-safe, and the types are automatically generated based on the schema of the Airtable table.
---
import type { GetStaticPaths } from "astro";
import { getCollection, type CollectionEntry } from "astro:content";
import Layout from "../../layouts/Layout.astro";
export const getStaticPaths: GetStaticPaths = async () => {
const launches = await getCollection("launches");
return launches.map((launch) => ({
params: {
id: launch.id,
},
props: { launch },
}));
};
type Props = { launch: CollectionEntry<"launches"> };
const { launch } = Astro.props;
const { data } = launch;
---
<Layout title={data.firstName}>
<h1>{data["Launch Name"]}</h1>
<p>{data["Launch date"]?.toDateString()}</p>
<p>{data.Description}</p>
</Layout>
Options
The airtableLoader
function takes an object with the following options:
base
: The ID of the Airtable base you want to load records from.table
: The name or ID of the table in the base you want to load records from.token
: Your Airtable personal access token. If not provided, it will be read from theAIRTABLE_TOKEN
environment variable.queryParams
: An optional object with options to pass to the Airtable API. This can be used to filter or limit the records returned. See the Airtable query documentation for more information.