gatsby-source-microcms と GraphQL

gatsby-source-microcms

• gatsby-source-microcms - npm

microCMS

• GET /api/v1/{endpoint}
• 全文検索に対応しました | microCMSブログ

GraphQL

queryPost(filter: {
  title: { allofterms: "GraphQL"},
  or: { title: { allofterms: "Dgraph" } }
} ) { ... }

queryPost(filter: {
  or: [
    { foo: { eq: "A" } }, 
    { bar: { eq: "B" } },
    { baz: { eq: "C" } }, 
    { quz: { eq: "D" } }
  ]
} ) { ... }

GraphQL で or 条件を書くやり方。

• And, Or and Not Operators in GraphQL - GraphQL
• API (GraphQL) - Make your data searchable - Amplify Docs

Serverless Function

• EchoをVercel（Zeit now）のServerless Function上で動かす - DEV Community

メモ

そもそも根本的なことを勘違いしていた。

• Gatsby.js の GraphQL はビルド時に走って静的サイトとして生成されるので、動的な検索をするならばせめて Fetch API 等の AJAX で取得してレンダリングさせる動的な方法になる
• microCMS の APIキー をフロントに露出させるわけにはいかないので、やるならばバックエンド側に持たせる形になる。 Vercel には Serverless Functions というものがあるらしいが、上限が厳しいしこういった用途向けではないはず