GraphQL을 조롱하기

React/JavaScript로 프론트 엔드를 작성 중입니다. GraphQL을 들었고 마음에 듭니다. REST API를 교체하고 싶습니다.

하지만 프론트 엔드를 완성하기 전에 백엔드를 만들고 싶지 않습니다. 즉, 가짜 API가 필요합니다. 따라서 두 가지 방법이 있습니다.

요청을 처리하고 가짜 응답을 반환할 수 있는 서버를 구축하십시오.

아니면... 예, 그 기능을 조롱할 수 있습니다.

좋은 아이디어가 있으면 언제든지 알려주세요. gmail의 peterlitszo, 곧 변경/업데이트하겠습니다!

첫 번째 부분 - 서버를 구축합니다.

이 게시물에는 가짜 서버를 구축하는 쉬운 설정이 있습니다.

Apollo는 GraphQL 클라이언트를 빌드하기 위한 패키지입니다. 모의 서버를 빌드하기 위한 문서는 다음과 같습니다.

https://www.apollographql.com/docs/apollo-server/testing/mocking/

그러나 나는 이것을 만들고 싶지 않습니다. 이유는 간단합니다. 컴퓨터에서 포트는 하나의 프로세스만 보유할 수 있습니다. 즉, 두 개의 프로세스(첫 번째는 React 개발(HMR 포함) 프로세스, 두 번째는 서버 프로세스)를 유지해야 하고 환경(dev 또는 릴리스)에 따라 변수를 변경해야 합니다.

두 번째 부분 - 모의.

이것이 내가 사용하는 방법입니다. 나는 지금 msw을 사용하고 있습니다.

기본 자바 스크립트 파일에서 이 부분을 추가하여 msw가 브라우저에서 요청을 받은 다음 파일./src/mock/browser.js에 정의된 가짜 데이터를 반환합니다.

// ./src/index.jsx

if (process.env.NODE_ENV === 'development') {
  const { worker } = await import('./mock/browser');
  worker.start();
  console.log('Add mock...');
}

이제 파일을 생성할 시간입니다./src/mock/browser.js.

// ./src/mock/browser.js

import { setupWorker, graphql } from 'msw';
import { filter, isUndefined } from 'lodash';
import { faker } from '@faker-js/faker';

// The news' data.
const new_data = {
  news: [
    {
      id: 1,
      title: 'First',
      image_uri: faker.image.abstract(undefined, undefined, true),
      content: 'First '.repeat(1000),
      summary: 'A lot of word `First`',
    },
    {
      id: 2,
      title: 'Second',
      image_uri: faker.image.abstract(undefined, undefined, true),
      content: 'Second '.repeat(1000),
      summary: 'A lot of word `Second`',
    },
    {
      id: 3,
      title: 'White',
      image_uri: faker.image.abstract(undefined, undefined, true),
      content: 'White '.repeat(1000),
      summary: 'Just white',
    },
    {
      id: 4,
      title: 'Random',
      image_uri: faker.image.abstract(undefined, undefined, true),
      content: faker.lorem.paragraphs(100, '\n\n'), // markdown
      summary: 'Hello',
    },
  ],
};

// Mock the query named News
const News = graphql.query('News', (req, res, ctx) => {
  const { newsId } = req.variables;
  const news = isUndefined(newsId)
    ? news_data.news
    : filter(news_data.news, (new_) => parseInt(newsId) === new_.id);
  return res(ctx.data({ news }));
});

// The log's data.
const log_data = {
  users: [
    {
      id: 1,
      name: 'Peter',
      emails: ['peterlitszo at gmail.com'],
      password: 'admin123',
      isAdmin: true,
    },
  ],
};

// Mock the query named Log.
const Log = graphql.query('Log', (req, res, ctx) => {
  const { email } = req.variables;

  return res(
    ctx.data({
      ...filter(log_data.users, (o) => o.emails.includes(email)),
    }),
  );
});

// build and export the worker.
const handlers = [News, Log];

export const worker = setupWorker(...handlers);