ykokw.xyz blog logo

Blog Posts

No results for 'undefined'Powered by Algolia

graphql-editorを プロダクトに組み込んでみました。

Install

yarn add -D graphql-editor

Routing修正

  • NODE_ENVがlocalなときだけのルーティングを追加
      {process.env.NODE_ENV === 'local' ? (
        <Route exact path={PATH_TO_VISUALIZER} component={Visualizer} />
      ) : null}

GraphQL Editorコンポーネント追加

  • GraphQLTypeDefが配列だった(graphql-toolsでschema生成するためのデータ)ので、joinした文字列からschemaを生成
  • GraphQL Editorはschemaを文字列で受け取ってたので、生成したGraphQLSchemaをもう一度printして渡している
  • editorを表示するか、readonlyにするか選べる

    • 可視化が目的だったらeditorVisibleもreadonlyもtrueにすると、目的のスキーマ探しやすくなる
//Page.jsx
/* eslint import/no-extraneous-dependencies:0 */
import React from 'react';
import { Editor } from 'graphql-editor';
import { buildSchema, printSchema } from 'graphql';

import { GraphQLTypeDef } from '../common/graphql';

export default () => {
  const schema = buildSchema(GraphQLTypeDef.join(''));
  return <Editor editorVisible readonly schema={printSchema(schema)} />;
};

感想

  • 可視化したけどスキーマ多すぎて見るの大変だった
  • とはいえスキーマを探しやすいのはあるかもしれない。。
  • graphql/utilities | API Referenceが色々便利そうだった

This content is built with Gatsby