React 앱 내에서 Airtable 활용

Unsplash의 Jan Antonin Kolar 님의 표지 사진

소개

Karbon 🌱에서 우리는 빠르게 반복하며 항상 제품과 서비스를 개선할 방법을 찾고 있습니다.

우리는 사용자가 새로운 기능에 대한 아이디어를 만들고, 공유하고, 투표할 수 있는 아이디어 상자를 만드는 아이디어를 가지고 있었습니다.

이것은 사용자가 입력한 민감하지 않은 데이터를 저장해야 하는 일반적인 프로젝트입니다. 그러나 우리는 애플리케이션의 나머지 부분에 영향을 미치지 않기를 원했습니다(예: 데이터베이스 스키마를 변경하고 싶지 않음).

Airtable은 이러한 종류의 사용 사례를 위한 훌륭한 도구입니다.

이 아이디어 상자를 만들어 봅시다! 🗳️

Airtable은 API와 상호작용할 수 있는 npm package을 제공합니다.
그러나 여러 테이블(하나는 투표용, 다른 하나는 아이디어용)으로 작업하고 있었기 때문에 많은 상용구 코드를 반복해야 했습니다.
나는 Airtable과 상호 작용하기 위한 멋진 추상화를 제공하는 것처럼 보이는 hook에 도달했지만 일부 버그가 있었고 작성자는 그것에 시간을 할애할 의향이 없는 것 같았습니다. 그래서 나는 내 자신의 후크를 작성하기로 결정했습니다.

몇 가지 문제를 해결하는 것 외에도 다음 사항에 대해 작업했습니다.

데이터를 가져오거나 업데이트하거나 삭제할 때 오류를 처리하는 옵션을 제공합니다

.

AirtableQueryParams을 사용하여 레코드를 필터링하는 옵션 제공

사용법 👩‍💻👨‍💻

선호하는 패키지 관리자(예: npm)를 사용하여 후크 및 Airtable의 패키지를 설치합니다.

npm install --save airtable use-airtable-crud

const { records, createRecord, updateRecord, deleteRecord, getRecords, loading } = useAirtable(
    'TABLE_NAME',
    AIRTABLE_API_KEY,
    'TABLE_BASE_ID',
    {
      filterByFormula: '{myField} = TRUE()',
    },
  );

후크here의 소스 코드를 찾을 수 있습니다.

아웃트로

이 후크가 여러분에게도 유용할 수 있기를 바랍니다! 프로토타이핑과 반복은 새로운 것을 배울 수 있는 좋은 방법입니다.