프론트엔드에 GraphQL 클라이언트가 필요합니까?

GraphQL 엔드포인트를 통해 데이터를 소비하는 애플리케이션을 구축하는 경우 프로젝트에 가져올 다른 프런트엔드 GraphQL 클라이언트를 살펴보고 있을 수 있습니다. GraphQL-Request 또는 Apollo Client와 같은 인기 있는 클라이언트를 조사하고 있을 수 있습니다. 하지만 이러한 클라이언트가 필요합니까? GraphQL 엔드포인트를 사용하고 싶기 때문에 프로젝트에 다른 종속성을 추가해야 합니까?

음, 소프트웨어에 대한 많은 질문이 있기 때문에... 상황에 따라 다릅니다. 이를 분석하고 GraphQL 요청이 실제로 무엇인지와 기타 고려 사항을 살펴보겠습니다.

그렇다면 GraphQL 요청을 하려면 무엇이 필요할까요?

GraphQL 요청은 쿼리를 본문으로 사용하여 끝점으로 전송되는 표준 POST 요청입니다. 그게 다야 - POST 요청.

아래 예는 유효한 JavaScript 가져오기 요청입니다. 요청 본문에 쿼리가 설정된 POST 요청을 보냅니다. 이것은 처음 9마리의 포켓몬을 반환합니다. (꼬부기 최고야 🐢)

fetch('https://beta.pokeapi.co/graphql/v1beta', {
    method: 'POST',
    body: JSON.stringify({
        query: `
            query samplePokeAPIquery {
            gen3_species: pokemon_v2_pokemonspecies(limit: 9, order_by: {id: asc}) {
                name
                id
            }
        }
      `,
    }),
})
    .then((res) => res.json())
    .then((result) => console.log(result));

Google Dev Tools Console 내에서 자바스크립트를 실행할 수 있다는 사실을 알고 계셨나요? F12를 누르고 상단의 콘솔 탭으로 이동하여 위의 코드를 붙여넣고 ENTER를 누릅니다. 그리고 콘솔에서 바로 데이터를 보여주는 요청을 수행합니다.



위에서 본 것과 유사한 것을 사용하기 위해 GraphQL 엔드포인트를 사용하는 프로젝트를 보는 것은 상당히 일반적입니다. 모든 인증을 처리하는 일반 서비스를 생성합니다. 노출된 서비스 메서드가 쿼리 문자열을 인수로 사용하도록 합니다. 이제 엔드포인트에 GraphQL 요청을 할 수 있는 서비스가 생겼습니다.

Sitecore의 데모 팀이 구축한 예를 여기에서 찾으십시오: GitHub Repo . 간단한 가져오기를 사용하여 Experience Edge GraphQL 끝점을 쿼리하고 있습니다.

결론: GraphQL 엔드포인트에서 데이터를 요청하려면 POST 요청만 하면 됩니다.

왜 더 원할까요? 전담 클라이언트는 나를 위해 무엇을 합니까?

GraphQL 클라이언트 사용을 고려할 때 더 많은 기능(예: 캐싱)과 사용 용이성이 가장 먼저 떠오릅니다.

기능이 풍부한 Apollo 또는 Relay GraphQL 클라이언트를 고려하고 있다면 광범위한 기능이 실제로 유용한지 확인하십시오. 캐싱, 프래그먼트, 공동 위치 등이 도움이 될까요? 이러한 기능이 무엇인지 모르는 경우 기술 부채가 추가될 수 있습니다.

GraphQL 클라이언트를 사용하는 가장 큰 이유는 캐싱입니다. Apollo 클라이언트는 사용 사례를 다음과 같이 설명합니다. "UI를 자동으로 업데이트하는 동안 애플리케이션 데이터를 가져오고, 캐시하고, 수정하는 데 사용합니다."(Apollo Client Docs ). 따라서 캐싱은 이 특정 클라이언트에서 두 번째로 언급된 기능입니다.

Apollo 클라이언트는 엔드포인트에 대한 호출을 줄이기 위해 InMemoryCache를 사용하여 클라이언트 측 캐시를 생성합니다. 캐싱은 GraphQL에서 다양한 형태를 취할 수 있으므로 자세히 알아보려면 다음 블로그 게시물을 추천합니다. GraphQL & Caching: The Elephant in the Room .

캐싱이 필요하지 않다면?

제가 자주 사용하는 경량 클라이언트는 GraphQL-Request 입니다. 그것은 나에게 충분히 가볍고 내 코드에 가독성과 이해 가능성을 추가하지만 캐싱 기능은 없습니다. 자세한 내용에 관심이 있으시면 4 popular JavaScript GraphQL clients에서 제 비교를 확인하십시오.

아래 코드는 GraphQL-Request 클라이언트를 설정합니다.

// graphQLClient.ts
import { GraphQLClient } from "graphql-request";

const endpoint = process.env.PREVIEW_EDGE_CH_ENDPOINT as string;

const graphQLClient = new GraphQLClient(endpoint)
graphQLClient.setHeader('X-GQL-Token', process.env.PREVIEW_EDGE_CH_API_KEY as string)

export default graphQLClient;

그런 다음 내 앱 어디에서나 이 클라이언트로 쉽게 요청할 수 있습니다.

// index.ts
import { GET_ALL_BLOGS } from '../graphQL/queries'
import graphQLClient from '../graphQL/graphQLClient'

const data = await graphQLClient.request(GET_ALL_BLOGS);

GraphQL-Request는 미화된 POST 요청 제작자이지만, 단순성과 내 코드에 추가된 가독성은 18kb 패키지 크기의 가치가 있습니다.

GraphQL 클라이언트에 대한 결론은?

GraphQL 엔드포인트에 요청하려면 GraphQL 클라이언트가 필요합니까? 아니.

그러나 코드에 가독성을 추가하는 데 도움이 될 수 있습니다. 그리고 Apollo 및 Relay와 같은 일부 GraphQL 클라이언트에는 많은 유용한 기능이 있습니다. 따라서 귀하와 귀하의 프로젝트에 어떤 기능이 중요한지 결정하는 것은 귀하에게 달려 있습니다.