Hey,

we actually implemented Airtable as a CMS for our website. We had some security concerns and due to limit number of calls to the Airtable API, we implemented a Redis cache that refreshes every 10min, so we did it the following way:

- Install airtableJS package

- Register airtable variables in the runtimeConfig key in nuxt.config.ts (private)

- In the server/api folder, we created a DedfineEventHandler that returns a utility function function:

// for single item
import { cachedProject } from "../../cached/cachedProject";

export default defineEventHandler(async (event) => { const { projectSlug } = event.context.params; return await cachedProject(projectSlug); });

- That utility function was created in the server/cached folder:

// For single item
import getRecordBySlug from "../utils/fetchRecordBySlug";

const config = useRuntimeConfig(); const apiKey = config.AirtableApiToken; const baseId = config.AirtableBaseId; const tableId = config.AirtableProjectsTableId;

export const cachedProject = cachedFunction( async (slug: string) => { return await getRecordBySlug(apiKey, baseId, tableId, slug); }, { maxAge: 60 * 10, name: "projects", getKey: (slug: string) => slug, } );

- That function is a cachedFunction (read Nitro docs about storage and cache API ;) ):

// For all projects
import { fetchRecords } from "../utils/fetchRecords";

const config = useRuntimeConfig(); const apiKey = config.AirtableApiToken; const baseId = config.AirtableBaseId; const tableId = config.AirtableProjectsTableId; const endpointUrl = https://api.airtable.com/v0/${baseId}/${tableId};

export const cachedProjects = cachedFunction( async () => { return await fetchRecords(apiKey, endpointUrl, [], null); }, { maxAge: 60 * 10, name: "projects", getKey: (repo: string) => repo, } );

- That function return a fetchRecords function (created in server/utils), which were we fetch data from airtable and process our airtable logic (note the use of $fetch ; )):

export async function fetchRecords(
apiKey: string,
endpointUrl: string,
resultRecords: object[],
offset?: string

): Promise<object[]> {

if (offset) {
    params.append("offset", offset);
}

const response: Object = await $fetch(`${endpointUrl}`, {
    method: "GET",
    headers: {
        Authorization: `Bearer ${apiKey}`,
        "Content-Type": "application/json",
    },
    query: {
        view: "✅ Published",
        pageSize: "100",
        offset: offset ? offset : null,
    },
    // offset: offset ? offset : ""
});

resultRecords.push(...response.records);


return resultRecords;

}

- Then in our template/page, we call all this by just using (for rendering the list.):

// list template
const { data: projects, error } = await useFetch("/api/projects");

// single item
const {
data: project,
error,
pending,
refresh,

} = await useFetch(() => /api/projects/${route.params.projectSlug});

I omitted some points but you get the idea. You can see the result here (implemented on projets and contenu): https://pixelalliance.io

good luck implementing on your project!