Vue Storefront 2에 커스텀 API 메서드를 추가하는 방법

Vue Storefront를 사용하면 몇 분 안에 다음 전자 상거래 웹사이트를 구축할 수 있습니다. Magento, Shopify, Commercetools 등과 같은 다양한 플랫폼 중에서 선택할 수 있습니다!

이 자습서에서는 전자 상거래를 위한 새 기능을 만들기 위해 사용자 지정 API 메서드를 추가하는 과정을 안내하고 싶습니다. 이를 통해 새로운 요청, GraphQL 쿼리/변형 또는 완전히 다른 것을 보낼 수 있는 완전히 새로운 끝점 확장을 가질 수 있습니다.

이 자습서에서는 Vendure 통합을 사용하지만 원하는 전자 상거래 통합을 자유롭게 선택할 수 있습니다. 프로세스는 통합에서 사용하는 API 클라이언트(Apollo GraphQL 또는 Axios REST)에 따라 약간의 차이를 제외하고 이러한 모든 통합에 대해 동일합니다.

암호

먼저 extension 파일에 새 middleware.config.js를 등록해야 합니다.

module.exports = {
  integrations: {
    vendure: {
      location: '@vue-storefront/vendure-api/server',
      configuration: {
        api: {
          uri: process.env.GRAPHQL_API,
          // to be used later with authentication
          tokenMethod: process.env.TOKEN_METHOD
        }
      },
      extensions: (extensions) => [
        ...extensions,
        {
          name: 'test',
          extendApiMethods: {
            testApiMethod: async ({ client, config }) => {
              const result = await client.query({ query: gql`
              query products {
                products {
                  items {
                    id
                    customFields
                  }
                }
              }
              `, fetchPolicy: 'no-cache' })
              console.log(result)
            }
          }
        }
      ]
    }
  }
};

다른 모든 것은 특정 통합이 제대로 작동하기 위한 기본값일 뿐이므로 extensions의 부분에 초점을 맞추겠습니다.

Extensions는 extensions라는 매개 변수를 허용하며 최종 반환에서 확산 확장을 반환하는 것이 중요합니다. 그렇지 않으면 통합의 기본 확장 기능이 작동하지 않을 수 있으므로 해당 기능도 반환해야 합니다. 다음으로 새로운 확장의 구조를 볼 수 있습니다. 자세한 내용을 살펴 보겠습니다.

{
  name: 'test',
  extendApiMethods: {
    testApiMethod: async ({ client, config }) => {
      const result = await client.query({ query: gql`
      query products {
        products {
          items {
            id
            customFields
          }
        }
      }
      `, fetchPolicy: 'no-cache' })
      console.log(result)
    }
  }
}

먼저 새 확장명을 지정해야 합니다. 고유한 이름(예: fetch-multiple-products )을 지정하는 것이 좋지만 이 경우에는 테스트 예제를 보여주고 있습니다. 다음으로, 각 속성이 고유한 새 API 메서드 또는 확장된 API 메서드를 나타낼 수 있는 extendApiMethods 개체가 있습니다. 각 API 메소드는 해체된 클라이언트 매개변수에 액세스할 수 있습니다. 그런 다음 이 매개변수를 사용하여 프런트엔드에서 정말 쉽게 특정 요청, 쿼리 또는 변형을 호출할 수 있습니다. 이 예는 사용자 지정 API 방법을 사용하여 GraphQL API에서 여러 제품을 가져오는 방법을 보여줍니다(Vendure의 새로운 방법은 이 쿼리를 구현하지 않음 - 제품은 다른 쿼리를 사용하여 가져옴).

그런 다음 새로 만든 API 메서드를 구성 요소 또는 다음과 같은 페이지에서 사용할 수 있습니다.

const { $vendure } = useVSFContext();

onSSR(async () => {
    await $vendure.api.testApiMethod()
});

모든 것이 올바르게 작동하면 프로젝트가 실행 중인 콘솔에 제품 쿼리 결과가 표시되어야 합니다.

요약

잘했어요! Vue Storefront 2 프로젝트에서 완전히 새로운 API 메서드를 구현했습니다. 이 지식을 통해 비즈니스 요구 사항에 더 잘 맞도록 사용자 정의할 수 있습니다.