Analog Services를 사용하여 GraphQL API 시뮬레이션

MSW(Mock Service Worker)는 백엔드 API를 시뮬레이션하거나 조작하는 데 사용되는 라이브러리입니다.응용 프로그램에서 새로운 기능을 개발하거나 테스트를 실행할 때 매우 유용하다.
이 문서에서 GraphQL API를 모의하기 위해 MSW를 설정하는 방법을 가르쳐 드리며, 몇 가지 다른 모의 조회와 돌연변이 방법을 보여 드리겠습니다.GitHub GraphQL API의 예는 다음과 같습니다.
이 예제 항목은 CreateReact 응용 프로그램과 Apollo 클라이언트를 사용하여 작성되었습니다.샘플 프로젝트의 UI 또는 구성 요소는 소개하지 않지만 GitHub 또는 CodeSandbox에서 전체 항목을 볼 수 있습니다.

MSW 설치
MSW의 작업 원리는 브라우저에 Service Worker를 만들어서 아날로그 HTTP 조회를 포착하고 사용자가 정의한 값으로 응답하는 것입니다.서비스 담당자는 프로그램 public 폴더에서 서비스를 제공해야 하는 특수한 스크립트에 정의되어 있습니다.
노드에서 실행할 때js (testing,) 시뮬레이션은 node-request-interceptor HTTP 요청을 차단하는 것으로 이루어졌지만, 본 논문에서는 브라우저 시뮬레이션만 사용할 것입니다.
시작하기 전에 가장 좋아하는 패키지 관리자를 사용하여 MSW를 설치하십시오.서비스 워크러 스크립트를 응용 프로그램 public 폴더에 생성합니다.

npm install msw --save-dev
npx msw init public

마지막 명령은 mockServiceWorker.js에 public 파일을 생성합니다.

시뮬레이션 정의
응용 프로그램 디렉터리에 mocks 라는 새 디렉터리를 만듭니다.

mkdir mocks

mocks에서 우리는 handlers.js라는 파일을 만들었다.이 파일은 아날로그 API 정의를 저장합니다.handlers.js 내부에서 graphql 라이브러리에서 가져와야 합니다msw.이것은 아날로그 GraphQL 조회와 돌연변이에 필요한 도구가 있는 이름 공간입니다.

import { graphql } from 'msw'

응용 프로그램localhost과 동일한 도메인에 없는 API를 시뮬레이션하려면 link 방법을 사용합니다.

const github = graphql.link("https://api.github.com/graphql");

현재 우리는 github 대상을 사용하여 조회와 변이 처리 프로그램을 정의할 수 있다.우리가 시뮬레이션할 조회는 repository 조회이다.우리는 RepositoryQuery라는 조작을 정의했는데 두 개의 매개 변수를 받아들인다. repository와 owner이다.쿼리는 쿼리된 저장소의 id, name, description 및 stargazerCount로 반환됩니다.

const GET_REPOSITORY = gql`
  query RepositoryQuery($repository: String!, $owner: String!) {
    repository(name: $repository, owner: $owner) {
      id
      name
      description
      stargazerCount
    }
  }
`

이제 repository 검색을 위한 아날로그 처리 프로그램을 정의합니다.

export const handlers = [
  github.query("RepositoryQuery", (req, res, ctx) => {
    return res(
      ctx.data({
        repository: {
          id: "MDEwOlJlcG9zaXRvcnkzMzU0MTc5Mjc=",
          stargazerCount: 1,
          name: "next-graphql-msw-example",
          description:
            "A example of using MSW to mock GraphQL API in a NextJS app",
        },
      })
    );
  }),
];

이 프로세서는 RepositoryQuery 라는 검색을 기다리고 ctx.data 호출된 JSON에 응답하기만 하면 된다.처리 프로그램은 호출query을 통해 조작명과 조회를 전달하는 처리 프로그램 함수로 정의됩니다.처리 프로그램은 세 개의 매개 변수를 수신한다. req, res, ctx.req는 일치 요청에 대한 정보를 포함하는 대상이다.res는 요청 응답을 되돌려 주는 함수입니다.ctx는 일부 보조 함수를 포함하는 대상이다.
응답을 되돌리려면 대상 호출 res 을 사용하고 그 값을 되돌려줍니다.
질의가 API에 변수를 전달하더라도 프로세서에서 해당 변수를 사용하지 않으며 항상 동일한 데이터를 반환합니다.
만약 우리가 지금 응용 프로그램에서 조회를 실행한다면, 우리는 시뮬레이션에서 정의한 응답을 받을 것이다.

 const { loading, error, data: queryData } = useQuery(GET_REPOSITORY, {
    variables: {
      owner: "juhanakristian",
      repository: "react-graphql-msw-example",
    },
  });

/* queryData
{
  repository: {
  id: "MDEwOlJlcG9zaXRvcnkzMzU0MTc5Mjc=",
  stargazerCount: 1,
  name: "react-graphql-msw-example",
  description: "A example of using MSW to mock GraphQL API in a React application",
}
*/

좋아요!그런데 만약 우리가 다른 저장소에서 데이터를 얻고 싶다면?
이를 실현하기 위해서, 우리는 검색의 변수를 방문하여 서로 다른 응답을 되돌려야 한다.

const { repository, owner } = req.variables;
if (repository === "msw" && owner === "mswjs") {
  return res(
    ctx.data({
      repository: {
        __typename: "Repository",
        id: "MDEwOlJlcG9zaXRvcnkxNTczOTc1ODM=",
        name: "msw",
        description:
          "Seamless REST/GraphQL API mocking library for browser and Node.",
        stargazerCount: 4926,
      },
    })
  );
}

req.variablesGraphQL 조회에 전달되는 변수를 포함하고 우리는 이 변수를 사용하여 어떤 데이터를 되돌려줄지 결정할 수 있다.

비웃음 사용
다음은 프로그램이 시작될 때 서비스 워크맨을 설정해야 합니다.이를 위해 다음 줄을 index.js 에 추가합니다.

if (process.env.REACT_APP_API_MOCKING === "enabled") {
  const { worker } = require("./mocks/browser");
  worker.start();
}

현재, 우리가 실행 REACT_APP_API_MOCKING=enabled npm start 을 통해 프로그램을 시작할 때, API 시뮬레이션이 활성화되고, 우리의 조회는 처리 프로그램에서 데이터를 받을 것입니다.
🙋 시뮬레이션이 유효한지 확인하려면 개발자 컨트롤러를 확인하십시오. 만약 모든 것이 정상적이라면 컨트롤러에 인쇄된 [MSW] Mocking enabled 를 보셔야 합니다.

돌변하다
돌연변이의 정의는 조회와 유사하지만, 우리는 query 방법으로 mutation 방법을 대체할 것입니다.GitHub GraphQL 모드에는 addStar 변형이 있는데, 우리는 그것을 사용하여 저장소에 별형을 추가할 수 있다.매개 변수로서, 이것은 AddStarInput 형식의 대상을 받아들여, 이 대상은 starrableId 속성에 저장소 id를 포함한다.

const ADD_STAR = gql`
  mutation AddStarMutation($starrable: AddStarInput!) {
    addStar(input: $starrable) {
      clientMutationId
      starrable {
        id
        stargazerCount
        __typename
      }
    }
  }
`;

현재, 변이에서 전달된 AddStarMutation 변수에 따라 데이터를 되돌려줍니다.

github.mutation("AddStarMutation", (req, res, ctx) => {
  const {
    starrable: { starrableId },
  } = req.variables;
  if (starrableId === "MDEwOlJlcG9zaXRvcnkxNTczOTc1ODM=") {
    return res(
      ctx.data({
        addStar: {
          clientMutationId: null,
          starrable: {
            id: "MDEwOlJlcG9zaXRvcnkxNTczOTc1ODM=",
            stargazerCount: 4927, // Count increased by one!
            __typename: "Repository",
          },
        },
      })
    );
  }
  return res(
    ctx.data({
      addStar: {
        clientMutationId: null,
        starrable: {
          id: "MDEwOlJlcG9zaXRvcnkzMzgxNDQwNjM=",
          stargazerCount: 2, //Count increased by one!
          __typename: "Repository",
        },
      },
    })
  );
}),

현재, 변이를 호출할 때, 프로세서로부터 업데이트된 starrableId 를 받을 것입니다. Apollo는 되돌아오는 stargazerCount 과 __typename 에 따라 캐시를 업데이트하기 때문입니다.

한층 더 읽다
시뮬레이션 서비스 직원docs
Mock Service Worker에 대한 질문이 있으면 KCD Discord에 채널이 있습니다.
읽어주셔서 감사합니다.🙏
사진 작성자Kristaps Ungurs가 Unsplash