「Gatsby x TypeScript」でブログを作りました (3. サードパーティーの使う上での豆知識)

const queries = require('./src/utils/algolia')
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-algolia`,
      options: {
        appId: process.env.GATSBY_ALGOLIA_APPID,
        apiKey: process.env.GATSBY_ALGOLIA_API_KEY,
        indexName: process.env.GATSBY_ALGOLIA_INDEXNAME,
        queries
      }
    }
  ]
}

const queries = require('./src/utils/algolia')
module.exports = {
  plugins: [
    ...(process.env.GATSBY_ALGOLIA_UPDATE_INDEX === 'true' ? [
      {
        resolve: `gatsby-plugin-algolia`,
        options: {
          appId: process.env.GATSBY_ALGOLIA_APPID,
          apiKey: process.env.GATSBY_ALGOLIA_API_KEY,
          indexName: process.env.GATSBY_ALGOLIA_INDEXNAME,
          queries
        }
      }
    ] : [])
  ]
}

const fetchAllPosts = `
{
  allMarkdownRemark {
    edges {
      node {
        id
        fields {
          slug
        }
        frontmatter {
          title
          category
          subcategory
          tags
          createdOn
          updatedOn
        }
        excerpt
      }
    }
  }
}
`

const unnest = node => {
  const { fields, frontmatter, ...rest } = node

  return {
    ...fields,
    ...frontmatter,
    ...rest
  }
}

const queries = [
  {
    query: fetchAllPosts,
    transformer: ({ data }) =>
      data.allMarkdownRemark.edges.map(edge => edge.node).map(unnest)
  }
]

module.exports = queries

Algolia: 1 queries to index
Algolia: query 0: executing query
⠹ onPostBuild
not finished onPostBuild - 0.317s
error Command failed with exit code 1.

    const objects = (await transformer(result)).map((object) => ({
      objectID: object.objectID || object.id,
      ...object,
    }));

netlify functions:invoke send-contact-email --no-identity --payload '{"contactEmail" : "jenna@example.com", "contactName" : "Jenna", "message" : "hello world from a function!"}'

{
  "name": "山田太郎",
  "email": "yukihirop@example.com",
  "subject": "ブログの記事で質問があります----",
  "message": "テストメッセージ\nテストメッセージ"
}

$ netlify functions:invoke send-contact-email --port 9000 --no-identity --payload ./payload.json
ran into an error invoking your function
FetchError: request to http://localhost:9000/.netlify/functions/send-contact-email failed, reason: connect ECONNREFUSED 127.0.0.1:9000
    at ClientRequest.<anonymous> (/Users/yukihirop/.nodenv/versions/12.7.0/lib/node_modules/netlify-cli/node_modules/node-fetch/lib/index.js:1455:11)
    at ClientRequest.emit (events.js:203:13)
    at Socket.socketErrorListener (_http_client.js:399:9)
    at Socket.emit (events.js:203:13)
    at emitErrorNT (internal/streams/destroy.js:91:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:59:3)
    at processTicksAndRejections (internal/process/task_queues.js:77:11) {
  message: 'request to http://localhost:9000/.netlify/functions/send-contact-email failed, reason: connect ECONNREFUSED 127.0.0.1:9000',
  type: 'system',
  errno: 'ECONNREFUSED',
  code: 'ECONNREFUSED'
}

"scripts": {
  "netlify:send-contact-email:dev": "netlify-lambda serve src/functions/send-contact-email"
}

$ yarn netlify:send-contact-email:dev
yarn run v1.19.0
$ netlify-lambda serve src/functions/send-contact-email
netlify-lambda: Starting server
Hash: e0f09b0eb79ec3dd76df
Version: webpack 4.43.0
Time: 5943ms
Built at: 2020-06-06 18:00:34
                Asset      Size  Chunks             Chunk Names
send-contact-email.js  1.11 MiB       0  [emitted]  send-contact-email
Entrypoint send-contact-email = send-contact-email.js
 [12] external "fs" 42 bytes {0} [built]
 [13] external "path" 42 bytes {0} [built]
 [23] external "crypto" 42 bytes {0} [built]
 [37] /Users/yukihirop/JavaScriptProjects/blog/node_modules/mailgun-js/lib/attachment.js 1.36 KiB {0} [built]
 [93] ./send-contact-email.js 2.02 KiB {0} [built]
 [94] /Users/yukihirop/JavaScriptProjects/blog/node_modules/dotenv/lib/main.js 2.93 KiB {0} [built]
 [95] /Users/yukihirop/JavaScriptProjects/blog/node_modules/mailgun-js/lib/mailgun.js 5.78 KiB {0} [built]
 [96] /Users/yukihirop/JavaScriptProjects/blog/node_modules/tsscmp/lib/index.js 1.15 KiB {0} [built]
 [98] /Users/yukihirop/JavaScriptProjects/blog/node_modules/mailgun-js/lib/request.js 10.7 KiB {0} [built]
[246] /Users/yukihirop/JavaScriptProjects/blog/node_modules/mailgun-js/lib/build.js 3.12 KiB {0} [built]
[250] /Users/yukihirop/JavaScriptProjects/blog/node_modules/mailgun-js/lib/schema.js 18.2 KiB {0} [built]
[251] ./md/index.js 1.95 KiB {0} [built]
[252] /Users/yukihirop/JavaScriptProjects/blog/node_modules/markdown-it/index.js 52 bytes {0} [built]
[307] /Users/yukihirop/JavaScriptProjects/blog/node_modules/markdown-it-br/index.js 1.8 KiB {0} [built]
[308] /Users/yukihirop/JavaScriptProjects/blog/node_modules/markdown-it-small/index.js 2.58 KiB {0} [built]
    + 295 hidden modules
Lambda server is listening on 9000

$ netlify functions:invoke send-contact-email --port 9000 --no-identity --payload ./payload.json
自動返信メッセージが正常に送信されました

const autoSend = await axios.post("http://localhost:9000/.netlify/functions/send-contact-email", { name, email, subject, message })

yarn -D add http-proxy-middleware

const { createProxyMiddleware } = require("http-proxy-middleware")

module.exports = {
  developMiddleware: app => {
    app.use(
      "/.netlify/functions/",
      createProxyMiddleware({
        target: "http://localhost:9000"
      })
    )
  },
}

exports.checkRecaptcha = functions.https.onRequest((req, res) => {
  // ここに処理をかく
}

exports.handler = async (event) => {
  // ここに処理をかく
}

"scripts": {
  "netlify:google-recaptcha-v3:dev": "netlify-lambda serve src/functions/google-recaptcha-v3"
}

import React, { useEffect } from 'react'

const IFRAMELY_URL = 'https://cdn.iframe.ly/embed.js'
const IFRAMELY_ID = 'iframely-embed-script'

// [ref]  
// https://github.com/tterb/gatsby-plugin-disqus/blob/master/src/components/Disqus.jsx#L39-L52
const Iframely = () => {
  useEffect(
    () => {
      const loadInstance = () => {
        if (typeof window !== 'undefined' && window.document) {
          const script = window.document.createElement('script')
          const parent = window.document.body
          script.async = true
          script.src = IFRAMELY_URL
          script.id = IFRAMELY_ID
          parent.appendChild(script)
          return script
        }
      }

      const cleanInstance = () => {
        const parent = window.document.body
        const script = window.document.getElementById(IFRAMELY_ID)
        if (script) {
          parent.removeChild(script)
        }
      }

      if (typeof window !== 'undefined' && window.document) {
        loadInstance()
      }

      return () => {
        cleanInstance()
      }
    },
    []
  )

  return <></>
}

export default Iframely