SWR 및 Hasura로 GraphQL 데이터 가져오기

시작SWR's github repo:
'SWR'이라는 이름은 stale-while-revalidate에서 유래한 것으로 HTTP RFC 5861에 의해 보급된 캐시 실효 정책이다.SWR은 먼저 캐시에서 데이터(stale)를 되돌려준 다음에 가져오기 요청(revalidate)을 보내고 마지막으로 최신 데이터를 다시 제공한다.
GraphQL 요청은 하루가 끝날 때 JSON 부하가 있는 HTTP POST 요청일 뿐입니다.그것은 데이터 획득의 전형적인 설정 비용을 필요로 하지 않는다.유행하는GraphQL 클라이언트는 일반적인 요청에 대응하는 프로그램보다 약간 복잡해 보이지만, 캐시와 같은 추가적인 장점도 있다.
SWR API는 다음과 같이 간단합니다.

const { data, error, isValidating, mutate } = useSWR(key, fetcher, options)

우리는 key와 fetcher에 대해 중점을 두고 토론할 것이다.SWR이 있는 GraphQL API 구현에서 GraphQL 문서가 사용의 관건이 될 것이다.RESTAPI에서 URL 끝점은 대개 키입니다/api/users.fetcher 함수는 데이터를 되돌려 주는 비동기 함수이다.그것은 키를 가져오고, 데이터는 논리에 기록됩니다.HTTP POST 요청과 네이티브 웹소켓 연결 사이의 논리를 구분합니다.
같은 페이지의 다른 구성 요소에서 사용하면 한 키만 있으면 요청을 여러 번 보내지 않습니다.
우리는 graphqurl나 graphql-request 등 간단한 데이터 획득 라이브러리를 사용하여GraphQL 조회를 보낼 수 있다.다음 예에서 나는 HTTP POST API 호출과 본기fetch 클라이언트를 위해 본기WebSocket 라이브러리를 계속 사용한다.
이 예의 배후 생각은 시연useSWR의mutate,trigger과SWR 연결과GraphQL의 결합 사용이다.GraphQLAPI가 필요합니다. 하수라 클라우드를 이용해서 바로 얻을 것입니다.

GraphQL API를 얻기 위해 Hasura를 배포합니다.

다음 단추를 눌러 Hasura Cloud에 GraphQL 엔진을 배치하고 Postgres 플러그인을 포함하거나 기존 Postgres 데이터베이스를 사용합니다.

하수라 콘솔 열기
콘솔 시작 버튼을 클릭하여 Hasura 콘솔을 엽니다.

테이블 사용자 만들기Data 탭으로 이동하여 다음을 포함하는 users라는 새 테이블을 만듭니다.

id(텍스트)

이름(텍스트)

(timestamp now () 에서

생성되었습니다.

GraphQL 쿼리 시도

query {
    users {
        id
        name
        created_at
    }
}

우리는 react 전단에서 상술한 users 조회를 사용할 것이다.
복제swr-graphqlrepo를 복사하고 libs 디렉터리로 이동합니다. 이 디렉터리는fetch와 웹소켓의 패키지를 포함합니다.GraphQL 엔드포인트를 Hasura 클라우드 프로젝트 URL로 변경합니다.

GraphQL 쿼리

useSWR 갈고리는graphql 조회를 키로 가져오고 함수는 getData에 정의됩니다.libs 디렉터리에 사용자 정의 fetch 방법을 작성했습니다.

import useSWR from 'swr'

const query = {
  'query': 'query { users(limit:10, order_by:{created_at: desc}) { id name } }'
};

const getData = async(...args) => {
  return await fetch(query);
};

export default () => {
  const { data, error } = useSWR(query, getData);
  if(error) {
    return <div>Error...</div>
  }
  if(!data) {
    return <div>Loading...</div>
  }
}

갈고리가 데이터/오류를 되돌려 렌더링 논리에서 상응하는 상태를 처리할 수 있습니다.

GraphQL 돌연변이

돌연변이가 완료되면 데이터 수정(추가/삭제/업데이트)을 통해 기존 상태를 업데이트하기를 원할 수도 있습니다.이것은 mutate 방법으로 실현할 수 있으며, 그 중에서 전송 key (GraphQL 조회는 우리의 관건이 될 것) 과 새로운 데이터를 전달할 수 있으며, 이 데이터들은 브리 값과 함께 사용하여 재검증 여부를 지정할 수 있다.

export default () => {
  const [text, setText] = React.useState('');
  const { data } = useSWR(query, getData)

  async function handleSubmit(event) {
    event.preventDefault()
    // mutate current data to optimistically update the UI
    mutate(query, {users: [...data.users, {id: uuidv4(), name: text}]}, false)
    // send text to the API
    const mutation = {
      'query': 'mutation users($name: String!) { insert_users(objects: [{name: $name}]) { affected_rows } }',
      'variables': { name: text}
    };
    await fetch(mutation);
    // revalidate
    trigger(mutation);
    setText('')
  }
  return ...
}

일단 돌연변이가 완성되면, 우리는 트리거로 그것을 다시 검증한다.

GraphQL 구독

마지막으로, 실시간 데이터가 있는 구독에 대해libs에서 사용자 정의 패키지를 정의했습니다.이 컴퓨터 WebSocket 를 사용하면 GraphQL 서버 (부하와 유사한 헤더 포함) 에 초기 메시지를 만들고 있습니다.

const ws = new WebSocket(GRAPHQL_ENDPOINT_WS, "graphql-ws");
const init_msg = {
  type: 'connection_init',
  payload: { headers: headers }
};

SWR에는 본 기기의 구독 연결이 없지만, 새 웹소켓 연결을 시작하는 가져오기 프로그램을 다시 사용합니다.

미리 렌더링

이상의 모든 예는 데이터 불러오는 것이 클라이언트에서 발생한다고 가정합니다.단, SEO/캐시 혜택을 얻기 위해 미리 렌더링이 필요한 프로그램을 구축하고 있다면, 미리 추출한 데이터를 useSWR 옵션에 초기 값으로 전달할 수 있습니다.
예를 들면 다음과 같습니다.

const { data, error } = useSWR(query, getData, { initialData: props.users } );

이는 initialData와 결합하여 서버에서 데이터를 미리 보여주는 것을 책임진다.
소스 코드 - https://github.com/praveenweb/swr-graphql
GraphQL을 통해 데이터를 얻는 데 어떤 프런트엔드 라이브러리를 더 좋아하는지 댓글로 알려주십시오.