---
# System prepended metadata

title: json-graphql-server
tags: [GraphQL]

---

# 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

    ```shell=
    npx create-next-app [App Name] --typescript

    cd [App Name]
    
    touch tsconfig.json

    npm run dev
    ```

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

    ```shell=
    npm install json-graphql-server
    ```

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

    ```javascript=
    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"を作成したらコレ　
    （任意のフォルダに作成したらルートからのパスを指定）
    ```shell=
    json-graphql-server db.js
    ```
    :::warning
    🐝 デフォルトだとlocalhost:3000で起動してしまうのでReact環境だと被ってしまう
    :::

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

    ```json=
    "scripts": {
        "api-graphql": "json-graphql-server src/db/db.js --p 3002"
    },
    ```
    :::info
    🍀 コマンドの最後に [ --p ポート番号 ] を指定することができる
    :::
    
1. 再度起動
    ```shell=
    npm run api-graphql
    ```
    これを実行して、http://localhost:3002 にアクセスするとGrapiQLエミュレーターが起動する

1. Postman　でAPiを叩いてみる

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

    ![reference link](https://i.imgur.com/gZZhg98.png)
