Kitsune Blog

Kitsune Blog

GraphQLとMERNスタックで簡易アプリを作りました。

最初の投稿から間隔が空きましたが、2回目の投稿となります。

今回下記の動画を参考にGraphQLとMERNスタックで簡易アプリを作成しました。

GraphQL Tutorial(The Net Ninja)

完成したアプリのURLはこちらです。https://my-nodea.herokuapp.com/

全体のソースコードはGithubに公開しています。https://github.com/hidecchi/graphql

Node.jsでサーバーを立ち上げて、mongodbからデータを取得して、GraphQLでクエリーを発行し、フロントはReactで表示という形です。 GraphQLは下記のように取得したいデータの形式に合わせて直感的にわかりやすい形のクエリーを記述することでデータを取得できるようです。

const getBookDetailQuery = gql`
  query($id:ID){
    book(id:$id){   
       id 
       name  
       genre  
       author{ 
           id  
           name  
           age   
           books{ 
               name  
               id    
           }  
      }
    } 
 }`

オーダーメイドな感じのクエリーを用いることで、 取得したいデータを1度で無駄なく取得することができRESTAPIを用いて設計する場合と比べて、リクエスト回数の削減やデータ通信料の削減につながり、パフォーマンスの向上に期待が持てるということです。

こういった新しい技術も使う機会があればまた、使ってみたいものです(^^)