Refresh GatsbyJS content cực nhanh không cần chạy lại development server

Khi sử dụng GatsbyJS, để xem lại dữ liệu chúng ta đã cập nhật thì ta phải chạy lại development server của GatsbyJS, việc này khá tốn thời gian ^^. Hôm nay mình sẽ hướng dẫn cho các bạn cách load dữ liệu cực nhanh bằng cách sử dụng tính năng refresh dưới đây nhé!

Trước đây, mình đã không ít lần tốn thời gian với việc nhìn chằm chằm vào máy tính, chờ development server của GatsbyJS khởi động lại, để xem lại content của mình sau khi chỉnh sửa. Hôm nay mình sẽ giúp các bạn tiết kiệm thời gian hơn bằng tính năng refresh content mà không cần chạy lại GatsbyJS nhé 🤩.

GatsbyJS refresh endpoint

"Vị thần tốc độ" GatsbyJS cung cấp cho chúng ta một environment variable tên là ENABLE_GATSBY_REFRESH_ENDPOINT. Khi chúng ta set biến này thành true thì GatsbyJS sẽ đưa ra một /__refresh webhook. Webhook này có thể nhận các POST requests để làm mới (refresh) nội dung của chúng ta.

Trước tiên, nếu bạn chưa set ENABLE_GATSBY_REFRESH_ENDPOINT=true thì chúng ta có thể set tại .env.development:

ENABLE_GATSBY_REFRESH_ENDPOINT=true

Tiếp theo chúng ta sẽ trigger refresh bằng cách sử dụng POSTMAN nhé:

Ngoài ra, bạn có thể trigger endpoint này bằng cách sử dụng lệnh ở Terminal:

curl -X POST http://localhost:8000/__ refresh.

Thêm một cách nữa là chúng ta cũng có thể refresh bằng button "Refresh Data" trong GraphiQL tại http://localhost:8000/___graphql. Button này chỉ hiển thị khi ENABLE_GATSBY_REFRESH_ENDPOINT=true.

Chúng ta có thể bảo mật endpoint bằng cách cung cấp một biến môi trường GATSBY_REFRESH_TOKEN, điều này sẽ khiến GatsbyJS chỉ chấp nhận các yêu cầu khi có authorization header phù hợp. Ví dụ: GATSBY_REFRESH_TOKEN = homiedev.com sẽ yêu cầu request phải có header: authorization: homiedev.com.

Như vậy là mình đã giới thiệu cho các bạn cách để refresh data của GatsbyJS rồi. Hi vọng mất vài phút để đọc bài viết này sẽ tiết kiệm cho các bạn nhiều thời gian hơn khi chúng ta muốn xem content đã chỉnh sửa ^^.

Chúng ta có thể thảo luận về nội dung này bên dưới phần comment nhé!. Chúc các bạn học tốt.