Upstash Redis를 사용한 Netlify 그래프용 전역 캐시

어제 Netlify는 Netlify Graph라는 새로운 기능을 발표했습니다. 제 동료가 최근 사진에서 유사한 누락 부분을 강조 표시했으며 Netlify는 솔루션을 향한 좋은 발걸음을 내디뎠습니다.

기본적으로 Netlify Graph는 개발자가 웹 앱에 대한 GraphQL API 호출을 빌드하는 데 도움이 됩니다. Netlify 대시보드에서 GraphQL 요청을 준비한 후 한 번의 클릭으로 프로젝트에 클라이언트 코드를 삽입할 수 있습니다.

Netlify Functions를 타사 서비스와 함께 사용하면 단점이 있습니다. 클라이언트 측 요청은 먼저 Netlify Backend(Functions)로 이동한 다음 타사 서비스로 이동합니다. (이 예에서는 Spotify) 이러한 서비스와 최종 사용자가 동일한 지리적 위치에 있지 않은 경우 이 여정은 대기 시간을 크게 증가시킵니다.

Netlify 함수에서 데이터를 캐시할 수 있다면 대기 시간을 최소화할 수 있습니다. Upstash Global Redis Database는 Netlify API 호출을 캐시하는 좋은 솔루션이 될 수 있습니다. Upstash Redis의 다중 지역 복제 덕분에 API 응답을 전역적으로 캐시/복제할 수 있습니다.

Spotify API를 호출하고 Upstash Global Redis에서 API 호출을 캐시하는 매우 간단한 Spotify 애플리케이션을 만들어 보겠습니다.

Next JS Starter App을 배포해 보겠습니다. Netlify 콘솔을 사용합니다. 이것은 Netlify에서 몇 번의 클릭으로 배포할 수 있는 매우 간단한 Next.js 앱입니다. Next JS 스타터 앱 배포를 위한 다른 옵션을 확인할 수 있습니다.

배포 단계 후 샘플 저장소를 로컬에 복제하고 netlify dev를 실행합니다. 명령. localhost:8888에서 작동해야 합니다. netlify login을 실행해야 할 수도 있습니다. 처음 설정하는 경우

이제 Netlify Graph-Spotify API 통합을 구성합니다. 탐색:

Netlify Console --> Sample App --> Graph --> Connect API or Service --> Spotify

Spotify 구성 페이지에서 Authentication을 활성화합니다. 및 Graph Explorer , API 통합을 위해 Spotify로 인증합니다.

이제 GraphQL Playground를 사용할 수 있습니다. Start querying Spotify을 클릭합니다. 단추. 이제 프로젝트 디렉토리에서 다음 명령어로 netlify-cli를 실행해야 합니다.

netlify dev --graph

CLI 완료 후 Netlify Graph 섹션을 확인하면 활성 세션이 표시됩니다. 세션을 클릭하면 GraphQL API를 위한 플레이그라운드 환경이 열립니다.

이 놀이터는 굉장합니다. 특정 GraphQL 쿼리를 생성하는 것이 매우 유용합니다. Featured Playlists을 반환하는 Spotify 쿼리를 빠르게 생성했습니다.

query SpotifyFeatured {
  spotify {
    featuredPlaylists {
      name
      images {
        url
      }
      description }}}

쿼리를 작성한 후 코드를 생성하고 프로젝트에 삽입해 보겠습니다.

Actions을 클릭합니다. --> Generate Handler

netlify-cli 자동으로 SpotifyFeatured.js를 생성합니다. api 디렉토리 및 SpotifyFeaturedForm.jsx 아래의 파일 pages 아래 디렉토리.

SpotifyFeatured.js :Netlify Backend에서 데이터를 가져오는 Netlify 함수 정의 --> Spotify API

SpotifyFeaturedForm.jsx :Netlify 함수를 호출하고 응답을 반환하는 단순/예시 형식인 React 컴포넌트입니다.

더 나은 UI 경험을 제공하기 위해 이 구성 요소의 html/css 부분만 편집했습니다. 게시물 끝에서 내 코드를 공유하겠습니다.

SpotifyFeaturedForm.jsx 포함 index.js에 대한 구성 요소.

import Spotify from './SpotifyFeaturedForm'
...
...
<Spotify title="Spotify Featured Playlist"/>

이제 기본 페이지에 버튼이 있고 Spotify API에서 응답을 받을 수 있습니다. 응답을 캐시합시다.

Upstash 콘솔에서 Upstash 글로벌 데이터베이스 생성

자동 생성된 Netlify 함수 코드(SpotifyFeatured.js ) 코드에는 Netlify Backend/Spotify API에서 데이터를 가져오는 코드가 있습니다.

const { errors, data } = await NetlifyGraph.fetchSpotifyFeatured({  }, {accessToken: accessToken});

존재하지 않는 경우 캐싱을 위해 Redis를 먼저 확인한 다음 타사 서비스에 전화를 겁니다.

Redis와 통신하기 위해 Upstash Redis JS 라이브러리를 사용했습니다. 데이터베이스 세부 정보 페이지에서 Upstash Redis REST 자격 증명을 얻을 수 있습니다.

UPSTASH_REDIS_REST_URL 교체 및 UPSTASH_REDIS_REST_PASSWORD 코드 조각에서.

redisClient.auth('UPSTASH_REDIS_REST_URL', 'UPSTASH_REDIS_REST_PASSWORD');
spotifyData = await redisClient.get('spotify-cache');
if (spotifyData.data == null) {
    spotifyData = await NetlifyGraph.fetchSpotifyFeatured({}, {accessToken: accessToken});
    if (spotifyData.errors) {
        console.error(JSON.stringify(spotifyData.errors, null, 2));
    } else {
        await redisClient.setex('spotify-cache', 300, JSON.stringify(spotifyData));
    }
} else {
    spotifyData = JSON.parse(spotifyData.data)
}
res.setHeader("Content-Type", "application/json");

return res.status(200).json({
    spotifyData
});

위의 코드 스니펫에서 먼저 Upstash Redis에 캐시가 있는지 확인합니다. 캐시가 존재하는 경우 캐시를 사용하고 그렇지 않으면 원래 API에서 가져오고 캐시를 upstash에 저장합니다. 매우 간단한 코드 스니펫이며 기반으로 개선/수정할 수 있습니다. 일부러.

그래서 몇 줄로 Netlify Graph 기능에 전역 캐시 동작을 추가했습니다.

결론

Netlify Graph 기능을 사용하면 모든 개발자가 타사 API 서비스를 코드에 쉽게 통합할 수 있습니다. Netlify의 GraphQL 탐색기와 코드 삽입은 많은 도움이 됩니다.

반면에 API 응답을 캐시하려면 Upstash Global 데이터베이스가 응답을 캐시하는 솔루션입니다. Upstash Redis 데이터베이스를 생성하는 것은 몇 번의 클릭으로 이루어집니다.

다음은 예제 애플리케이션의 최신 코드입니다.