# json-graphql-server
###### tags: `GraphQL`

# json-graphql-serverとは
- フロントエンド側で簡易的なGraphQLサーバーを構築できる開発ツール

> npm
> https://www.npmjs.com/package/json-graphql-server

# Nextjs環境にjson-graphql-serverを実装する

1. Nextjs環境構築

> Nextjs x TypeScript
> https://nextjs.org/docs/basic-features/typescript

    npx create-next-app [App Name] --typescript

    cd [App Name]
    
    touch tsconfig.json

    npm run dev

1. json-graphql-serverインストール

    npm install json-graphql-server

1. 好きなフォルダに "db.js" ファイルを作成する

    module.exports = {
        posts: [
            { id: 1, title: "Lorem Ipsum", views: 254, user_id: 123 },
            { id: 2, title: "Sic Dolor amet", views: 65, user_id: 456 },
        ],
        users: [
            { id: 123, name: "John Doe" },
            { id: 456, name: "Jane Doe" }
        ],
        comments: [
            { id: 987, post_id: 1, body: "Consectetur adipiscing elit", date: new Date('2017-07-03') },
            { id: 995, post_id: 1, body: "Nam molestie pellentesque dui", date: new Date('2017-08-17') }
        ]
    }

1. 起動
ルートに"db.js"を作成したらコレ　
（任意のフォルダに作成したらルートからのパスを指定）

    json-graphql-server db.js

:::warning
🐝 デフォルトだとlocalhost:3000で起動してしまうのでReact環境だと被ってしまう
:::

1. package.jsonにコマンドを登録 / 起動時のポート番号指定

    "scripts": {
        "api-graphql": "json-graphql-server src/db/db.js --p 3002"
    },

:::info
🍀 コマンドの最後に [ --p ポート番号 ] を指定することができる
:::

1. 再度起動

    npm run api-graphql

これを実行して、http://localhost:3002 にアクセスするとGrapiQLエミュレーターが起動する

1. Postman　でAPiを叩いてみる

今回はdb.jsファイルのpostをGETしてみる