Faker로 GraphQL 서버를 실제로 시뮬레이션합니다.회사 명

GraphQL 서버는 구현되지 않았거나 일시적으로 사용할 수 없는 API를 사용해야 하는 경우가 있습니다.이런 상황에서 시뮬레이션은 정확한 방법인 것 같지만 좋은 시뮬레이션 데이터를 유지하기 어려워서 우리 응용 프로그램에는 도처에'Lorem ipsum'이 있다.

가짜 상품.회사 명

faker.js는 노드나 브라우저에서 허위 데이터를 생성할 수 있는 라이브러리입니다.다음과 같은 일반적인 용례에 대한 데이터를 생성하는 방법은 여러 가지가 있습니다.

이름

주소

핸드폰

이미지

개 회사

...

설령가짜를 마구 세어라!

기타 도구

우리는 Koa 를 사용하여 서버를 만들 것입니다.이것은 "Express 배후의 팀이 설계한 새로운 웹 프레임워크"이다.실제로, 그것은 서로 다른 중간부품이 실현되고, express보다 일을 적게 처리한다.자세한 내용은 Koa의 저장소comparaison에서 확인할 수 있습니다.
GraphQL 구현에 대해서는 Apollo Server 을 사용합니다.이것은 GraphQL에서 가장 유행하는 서버 구현인 것 같고 Koa에 매우 적합하다. 왜냐하면 apollo-server-koa 패키지가 있고 이미 Apollo 서버 팀이 실현했기 때문이다.
마지막으로, 우리는 당신이 어떤 플랫폼을 사용하든지 간에 모두가 알고 있는 cross-env 패키지를 사용하여 환경 변수를 설정할 것입니다.

서버 설정

먼저 다음과 같은 구조를 가진 폴더를 만듭니다.

.
├── package.json
└── src
    └── index.js

본고에 대해 우리는 yarn 를 사용할 것이지만, 당신도 사용할 수 있습니다 npm.패키지를 초기화합니다.init 명령이 있는 json:

yarn init

다음 종속성을 설치합니다.

yarn add apollo-server-koa cross-env faker graphql koa

실행start 파일을 추가하는 src/index.js 스크립트:

{
  "scripts": {
    "start": "node src/index.js"
  }
}

src/index.js 파일에서 새 Koa 응용 프로그램을 실례화했습니다.

const Koa = require('koa');

const app = new Koa();

app.listen({port: 4000}, () =>
  console.log(`🚀 Server ready at http://localhost:4000`),
);

start 스크립트를 실행합니다.콘솔 출력에서 상기 예시의 console.log 메시지를 보십시오.

GraphQL 끝점 생성하기

이제 GraphQL 노드를 구현할 때입니다.API가 아직 구현되지 않은 경우를 가정합니다.이 API는firstname과lastname이라는 인원 목록을 공개해야 합니다.우리는 모델을 정의하고 /graphql 를 가진 apollo-server-koa 단점에 접근할 수 있도록 할 것이다.ApolloServer에서 가져오기gql 및 apollo-server-koa:

const {ApolloServer, gql} = require('apollo-server-koa');

개인 목록과person 형식 자체를 되돌려주는 검색을 정의했습니다.

const typeDefs = gql`
  type Person {
    lastname: String
    firstname: String
  }

  type Query {
    persons: [Person]
  }
`;

API가 존재하지 않으므로 이 질의를 사용할 수 없음을 알리는 오류가 발생했습니다.

const resolvers = {
  Query: {
    persons: () => {
      throw Error('Not yet implemented');
    },
  },
};

우리는 우리의 유형으로 정의하고 조회에 사용할 해상도를 사용하여 아폴로 서버를 실례화합니다.

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

마지막으로 이전에 만든 GraphQL 중간부품을 Koa 응용 프로그램에 적용합니다.

server.applyMiddleware({app});

현재 명령yarn start으로 서버를 시작하고 브라우저에서 URLhttp://localhost:4000/graphql을 엽니다.GraphQL IDE의 예쁜 인터페이스를 보셔야 합니다.

쿼리를 입력하여 사용자 목록과 데이터를 검색하는 경우:

{
  persons {
    firstname,
    lastname
  }
}

그러면 다음과 같은 오류가 발생합니다.

{
  "errors": [
        {
            "message": "Not yet implemented",
        }
    ]
}

가짜로 그것을 비웃다.회사 명

이 오류는 예상한 결과가 아닙니다.우리의 서버가 시뮬레이션되었을 때, 우리는 무작위의 실제 데이터를 필요로 한다.이를 실현하기 위해서는 허위 데이터를 생성하는 다른 해상도로 오류를 일으키는 기본 해상도를 다시 작성해야 합니다.
이를 위해, 우리는 NODE_ENV 환경 변수를 mock로 설정하여 아폴로 서버가 따라야 할 행위를 확정할 것이다.mock에 package.json 스크립트를 추가하여 이 스크립트는 NODE_ENV 변수를 설정하고 cross-env 스크립트를 호출합니다.

{
  "scripts": {
    "start": "node src/index.js",
    "mock": "cross-env-shell NODE_ENV=mock yarn start"
  }
}

Apollo 서버는 옵션 중 하나start의 속성을 가지고 있으며, 이 속성은 부울 값이나 아날로그 해상도가 있는 대상을 받아들입니다.먼저 mocks 이 true 이면 NODE_ENV 로 설정합니다.

const server = new ApolloServer({
  typeDefs,
  resolvers,
  mocks: process.env.NODE_ENV === 'mock' ? true : false,
});

이 단계에서 GraphQL IDE에서 질의를 다시 실행하면 첫 번째 결과가 나타납니다.

{
  "data": {
    "persons": [
      {
        "firstname": "Hello World",
        "lastname": "Hello World"
      },
      {
        "firstname": "Hello World",
        "lastname": "Hello World"
      }
    ]
  }
}

이것은 매우 좋지만 결코 현실적이지 않다.faker를 추가하기 위해서는 우리 자신의 아날로그 해상도를 실현하고 이를 Apollo 서버에 전달해야 합니다.아날로그 해상도에서 검색 속성은 해상도가 정의한 대상을 되돌려주는 함수여야 합니다.mock 조회의 해상도에서 우리는 두 사람으로 구성된 그룹을 되돌려줍니다.persons 방법은 명명 공간에서 조직된다.다음 방법을 포함하는 faker.js 네임스페이스를 사용합니다.

이름

성

직무

제목

...

맞습니다. 저희는 name 및 firstName 방법으로 우리 두 사람을 위해 무작위 데이터를 생성할 것입니다.

const mockResolvers = {
  Query: () => ({
    persons: () => [
      {
        firstname: name.firstName(),
        lastname: name.lastName(),
      },
      {
        firstname: name.firstName(),
        lastname: name.lastName(),
      },
    ],
  }),
};

// ...

const server = new ApolloServer({
  typeDefs,
  resolvers,
  mocks: process.env.NODE_ENV === 'mock' ? mockResolvers : false,
});

GraphQL IDE에서 질의를 수행하면 다음과 같은 좋은 데이터가 제공됩니다.

{
  "data": {
    "persons": [
      {
        "firstname": "Mélissa",
        "lastname": "Mathieu"
      },
      {
        "firstname": "Camille",
        "lastname": "Richard"
      }
    ]
  }
}

보너스

다음은 아날로그 해상도를 위한 무작위 크기 그룹을 만드는 방법입니다.

const randomArray = (min, max, callback) => {
  const size = random.number({min, max});
  return Array.from({length: size}, callback);
};

다음과 같은 방법으로 이전 해상도를 재구성할 수 있습니다.

const mockResolvers = {
  Query: () => ({
    persons: () =>
      randomArray(2, 6, () => ({
        firstname: name.firstName(),
        lastname: name.lastName(),
      })),
  }),
};

나는 본문에서 제공한 모든 출처를 하나로 만들었다repository.피드백 감사합니다.🙏 만약 당신에게 무슨 문제가 있으면 트위터로 저에게 보내주세요!