fakerであなたのGraphSQLサーバを実際に模擬します.js

時々、GraphSQLサーバーはまだ実装されていないAPIを使用する必要があります.モッキングは、このケースで行うには正しいことだが、我々は我々のアプリのどこに“Lorem iPsum”で終わるように良い模擬データを維持するのは難しいです.

フェーカー.js

faker.js ノードまたはブラウザの偽データを生成できるライブラリです.一般的なユースケースのデータを生成する方法はたくさんあります.

名称

アドレス

電話

イメージ

会社

...

…でも.Lorem IPsum!

その他の工具

私たちはKoa サーバを作成するにはそれは“エクスプレスの背後にあるチームによって設計された新しいWebフレームワーク”です.実際には、それは異なるミドルウェアの実装を持っており、表現よりも少ないものを乗り出す.もっと情報が欲しいならcomparaison はKonaのリポジトリにあります.
Graphqlの実装についてはApollo Server . それは、GraphSQLの最も人気のあるサーバーの実装であるようです、それはKEAapollo-server-koa パッケージが存在し、アポロサーバチームによって実装されています.
最後に我々はよく知られているcross-env パッケージは、使用しているプラットフォームにかかわらず環境変数を設定します.

サーバの設定

まず、以下の構造を持つフォルダを作成します.

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

この記事についてはyarn でも使えますnpm 同様に.initパッケージ.JSONによるinit コマンド

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 file新しいKEAアプリケーションをインスタンス化します.

const Koa = require('koa');

const app = new Koa();

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

あなたのstart スクリプト.あなたはconsole.log 上記の例ではコンソール出力にメッセージがあります.

グラフの終了点を作成する

GraphSQLのエンドポイントを実装する時です.APIがまだ実装されていない状況にあるとしましょう.このAPIは、firstnameとlastnameを持つ人のリストを公開することになっています.私たちは、スキーマを定義し、それを/graphql エンドポイントapollo-server-koa .
輸入ApolloServer and gql からapollo-server-koa :

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

私たちは、人とタイプ人自体のリストを返す質問を定義します:

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,
});

最後に、以前に作成したGraphSQLミドルウェアをKEAアプリケーションに適用します.

server.applyMiddleware({app});

コマンドを使用してサーバーを起動する場合yarn start URLを開くhttp://localhost:4000/graphql あなたのブラウザで.あなたは素晴らしいインターフェイスを参照してくださいGraphQL IDE .

クエリを入力して、データを持つ人のリストを取得します.

{
  persons {
    firstname,
    lastname
  }
}

次のエラーが発生します.

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

それをfakerで湿らせてください。js

このエラーは予想された結果ではありません.私たちは、ランダムな現実的なデータを我々のサーバーがモックされます.それを達成するために、偽のデータを生成する別のエラーをスローする既定のレゾルバをオーバーライドする必要があります.
この目的のためにNODE_ENV 環境変数mock 我々のアポロサーバがどの行動をたどるべきかを決定するために.我々は、Aを加えることによってそれを達成しますmock 我々のスクリプトpackage.json それでNODE_ENV 変数使用cross-env を呼び出すとstart スクリプト

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

アポロサーバmocks そのオプションのプロパティでは、論理和のオブジェクトまたはモックドリゾルバを持つオブジェクトを受け取ります.始めるにはtrue if NODE_ENV はmock :

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

この手順で、GraphSQL IDEでクエリを再実行すると、最初の結果が表示されます.

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

それは良いですが、それは本当に現実的ではありません.Fakerを追加するには、私たち自身のモックドレゾルバを実装し、アポロサーバに渡す必要があります.Mockedリゾルバでは、クエリプロパティは、Resolver定義を使用してオブジェクトを返す関数でなければなりません.我々のリゾルバでpersons クエリ2つの人の配列を返します.faker.js メソッドは名前空間で編成されます.私たちはname 名前空間には以下のメソッドが含まれます.

firstname

名前

冗談

タイトル

...

あなたはそれを推測する、我々は使用されますfirstName and lastName 我々の二人のためにランダムデータを生成する方法

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,
});

GraphSQL IDEでクエリを実行します.

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

ボーナス

ここでは、私のmoockedリゾルバに対してランダムなサイズの配列を生成する方法を示します.

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 この記事で紹介されたすべての情報源で.フィードバックは有難い🙏 何か質問があればツイートしてください!