By Arnon Puitrakul - 20 กรกฎาคม 2018
เรื่องมันเกิดจากเมื่อราว ๆ เดือนก่อนก็พยายาม Upgrade Gatsby ใน Blog (เว็บนี้แหละ) ให้เป็น V2 Beta เลยต้องมานั่งอ่าน Migration Guide แล้วไปเจอกับสิ่งที่เรียกว่า 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 เราสะอาดขึ้นมาก
ใน Synology NAS มีความสามารถนึงที่น่าสนใจคือ การใช้ SSD เป็น Cache สำหรับระบบ ที่ทำให้ Performance ในการอ่านเขียน เร็วขึ้นกว่าเดิมมาก ๆ แน่นอนว่า เราลองละ วันนี้เราจะมาเล่าให้อ่านกันว่า หากใครคิดที่จะทำ มันเหมาะ หรือ ไม่เหมาะกับการใช้งานของเรา...
เรื่องราวเกิดจากการที่เราต้องย้าย Add-on Package ใน DSM และคิดว่าหลาย ๆ คนน่าจะต้องประสบเรื่องราวคล้าย ๆ กัน วันนี้เราจะมาเล่าวิธีการว่า เราทำยังไง เจอปัญหาอะไร และ แก้ปัญหาอย่างไรให้ได้อ่านกัน...
การใช้ Docker CLI ในการจัดการ Container เป็นท่าที่เราใช้งานกันทั่วไป มันมีความยุ่งยาก และผิดพลาดได้ง่ายยังไม่นับว่ามี Instance หลายตัว ทำให้เราต้องค่อย ๆ SSH เข้าไปทำทีละตัว มันจะดีกว่ามั้ย หากเรามี Centralised Container Managment ที่มี Web GUI ให้เราด้วย วันนี้เราจะพาไปทำความรู้จักกับ Portainer กัน...
ปกติหากเราต้องการจะเปิดเว็บสักเว็บ เราจำเป็นต้องมี Web Server ตั้งอยู่ที่ไหนสักที่หนึ่ง ต้องใช้ค่าใช้จ่าย พร้อมกับต้องจัดการเรื่องความปลอดภัยอีก วันนี้เราจะมาแนะนำวิธีการที่ง่ายแสนง่าย ปลอดภัย และฟรี กับ Cloudflare Tunnel ให้อ่านกัน...