มาลองใช้ StaticQuery ใน Gatsby v2 กัน

เรื่องมันเกิดจากเมื่อราว ๆ เดือนก่อนก็พยายาม Upgrade Gatsby ใน Blog (เว็บนี้แหละ) ให้เป็น V2 Beta เลยต้องมานั่งอ่าน Migration Guide แล้วไปเจอกับสิ่งที่เรียกว่า StaticQuery เข้า ตอนแรกก็เฉย ๆ แต่พอมานั่งอ่านมันดี ๆ แล้ว มันโคตรแจ่ม วันนี้เลยมาสั้น ๆ จะมาแนะนำท่าที่จะใช้จากมันกัน

StaticQuery คืออะไร ?

StaticQuery เป็น API ใน Gatsby V2 ที่ทำให้เราสามารถรัน GraphQL Query จาก Component ได้ ถ้าใครใช้ V1 อยู่จะรู้ว่า GraphQL Query สามารถทำได้ผ่าน Page หรือ Layout ได้แค่นั้น ไม่สามารถแปะไว้ในไฟล์ Component ใด ๆ ได้

ถ้าเราใส่ไว้ ตอนเราสั่ง develop มันจะขึ้นเตือนอยู่ ตอนแรก ๆ ที่ผมเขียนก็ไม่รู้ก็เขียนใส่ใน Component ไปดอกนึง งมอยู่เป็นวัน สรุปคือมันทำไม่ได้ แต่มาใน Version 2 สามารถทำได้แล้วผ่าน StaticQuery นั่นเอง

มาลองเล่นกันดีกว่า

ก่อนอื่นให้เราไปสร้าง Gatsby Project กันก่อนโดยใช้ gatsby-cli เหมือนปกติที่เราสร้าง Project กัน แต่ครั้งนี้เราต้องการ Version 2 เลยต้องเพิ่ม Option นิดหน่อย

gatsby new static-query-tester https://github.com/gatsbyjs/gatsby-starter-default#v2

จริง ๆ ใน Starter ของ Version 2 มันก็มีการใช้ StaticQuery มาแล้วละ ตรง Layout ก็มีเขียนไว้อยู่ ดังนั้นเราลองมาดูกันว่า ใน Starter เขียนอะไรมาบ้าง

import React from 'react'
import PropTypes from 'prop-types'
import {Helmet} from 'react-helmet'
import { StaticQuery, graphql } from "gatsby"

import Header from './header'
import './layout.css'

const Layout = ({ children, data }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => (
      <>
        <Helmet
          title={data.site.siteMetadata.title}
          meta={[
            { name: 'description', content: 'Sample' },
            { name: 'keywords', content: 'sample, something' },
          ]}
        />
        <Header siteTitle={data.site.siteMetadata.title} />
        <div
          style={{
            margin: '0 auto',
            maxWidth: 960,
            padding: '0px 1.0875rem 1.45rem',
            paddingTop: 0,
          }}
        >
          {children}
        </div>
      </>
    )}
  />
)

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

layout.js

ในไฟล์นี้ เราจะเห็นว่า เขา Import StaticQuery และ graphql ออกมาและสั่ง render Component ชื่อ StaticQuery ออกมา ทำให้เราเห็นว่า StaticQuery ก็เป็นเหมือน Component นึง ที่เราสามารถป้อน Query และ Children เป็น Props ลงไปได้ ดังนั้นวิธีใช้ก็ง่าย ๆ เหมือนเราเรียกใช้ Component ทั่ว ๆ ไปเลย

แล้วมันช่วยอะไร ?

คนที่ไม่เคยเขียน Gatsby มาก่อนน่าจะยังนึกภาพไม่ออกว่ามันเข้ามาช่วยอะไร แต่กลับกัน ถ้าเป็นคนที่เคยเขียนมาก่อนจะรู้ว่า มันโคตรแจ่ม เคสง่าย ๆ อย่างเช่น ถ้าเราต้องการ SiteInfo ที่เราเขียนไว้ใน gatsby-config.js เราก็จะต้องทำผ่าน GraphQL Query ที่เราสามารถทำได้ใน Layout และ Page เท่านั้น

แต่เวลาเราเขียนกัน เราจะเขียน Header แยกออกไปเป็นอีกไฟล์นึง เพราะฉะนั้น เราจะต้อง Query ชื่อเว็บ ที่อยู่ใน SiteInfo ทุกที่ที่เราเรียกใช้ Header แล้วโยนเข้าไปเป็น Props ให้ Header ซึ่งมันกินบรรทัดของ Code เยอะมาก และทำให้ Code ค่อนข้างรก เพราะเราต้องเขียนเรียกส่วนที่ Header ต้องการซำ้ ๆ กันหลาย ๆ ครั้งตามจำนวนที่เราเรียก Header

หรืออีกเคสที่น่าเอามาใช้ก็น่าจะเป็นเหมือนกับ Top Stories หรือ Top Sale ที่มันจะฟีทของหรือบทความที่คนดูเยอะ หรือซื้อเยอะสุดมาให้ โดยที่เราไม่ต้องสั่ง Query ใน Layout ให้เปลืองบรรทัด Code มากขึ้นอีก

สรุป

StaticQuery เป็น API ตัวใหม่ใน Gatsby v2 ที่จะเข้ามาช่วยให้เราสามารถเรียก GraphQL Query จาก Component ไหนก็ได้ ต่างจาก V1 ที่สามารถ Query ได้จากแค่ Layout และ Page เท่านั้น ทำให้เราไม่ต้องโยนข้อมูลที่เป็น Static ไม่ต้องขึ้นกับอะไร เช่น Header ที่แสดงแค่ประมาณชื่อเว็บอะไรประมาณนั้น ก็เป็น API ที่ผมชอบมาก อยากให้ทุกคนลองฮ่ะ มันช่วยให้ Code เราสะอาดขึ้นมาก