Liên kết WordPress với Gatsby, tập làm quen với GraphQL

Trong bài trước mình đã cùng các bạn đã làm quen với framework Gatsby. Thì với bài này mình cùng các bạn kết nối Gatsby với WordPress và cùng tập làm quen với GraphQL. Để kết nối với WordPress chúng ta vào trang plugin của Gatsby.

Liên kết WordPress với Gatsby

Các bạn vào link mình đính kèm và tải plugin gatsby-source-wordpress vào folder project các bạn tạo ở bài trước, bằng cách bật terminal tại thư mục và dùng lệnh sau:

npm install --save gatsby-source-wordpress

Sau khi cài xong các bạn bật IDE tại thư mục project. Bạn nào xài visual code thì các bạn gõ tiếp vào terminal lệnh sau:

code .

Còn bạn nào xài Atom thì các bạn dùng lệnh:

atom .

Sau khi bật IDE tại thư mục các bạn tìm file gatsby-config.js  như các bạn thấy thì file này dùng để khai báo các plugin mà bạn đã cài đặt vì khi các bạn khởi tạo thì theme default đã tích hợp sẵn một số plugin hỗ trợ như: gatsby-plugin-react-helmet, gatsby-transformer-sharp,…

Còn công dụng của các plugin này như thế nào thì từ từ qua các bài kế chúng ta cùng tìm hiểu nhé! Giờ quay lại vấn đề chính là cài plugin gatsby-source-wordpress. Các bạn thêm đoạn code này vào nối tiếp array plugin trong module.exports

{
    resolve: `gatsby-source-wordpress`,
    options:{
        baseUrl:`link-wordpress`,
        protocol:`https`,
        hostingWPCOM: false,
    }
},

Trong trang plugin sẽ hướng dẫn đoạn code dài hơn và chi tiết hơn. Cùng với một số plugin bắt buộc phải cài vào CMS WordPress nếu như các bạn xài thêm Yoast SEO và ACF Ở các bài sau mình sẽ đề cấp tới.

Trong đoạn code trên các bạn điền url của CMS WordPress vào và protocol là giao thức kết nối như http hoặc https tùy vào domain chứa WordPress của bạn.

Nhưng minh nghĩ nên dùng https để đồng bộ với server deploy sau này. Còn hostingWPCOM thì mình để false do mình không xài hosting của WordPress.com. Vậy là bước đầu chúng ta kết nối WordPress đã xong. Để kiểm tra chúng ta qua phần kế tiếp là làm quen với GraphQL.

Tập làm quen với GraphQL

Các bạn tiếp tục bật terminal tại thư mục project và dùng lệnh:

gatsby develop

Để bật chế độ deploy Gatsby trên local. Sau đó các bạn vào link để bật GraphQL: http://localhost:8000/__graphql

Các bạn để ý thanh sidebar nếu như hiện các trường của WordPress thì xin chúc mừng các bạn đã kết nối thành công với WordPress. Sau đây chúng ta cùng render thử data trên GraphQL nhé

query MyQuery {
  allWordpressPost {
    edges {
      node {
        title
        slug
        excerpt
        content
      }
    }
  }
}

Vào trong trình soạn thảo trên browser và sau đó các bạn sẽ thu được về như thế này nếu như các bạn chưa có bài nào trong post:

{
  "data": {
    "allWordpressPost": {
      "edges": [
        {
          "node": {
            "title": "Hello world!",
            "slug": "hello-world",
            "excerpt": "<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>\n",
            "content": "\n<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>\n"
          }
        }
      ]
    }
  }
}

Và đây là kết quả mình chụp lại:

Vậy là chúng ta đã làm quen và biết cách lấy dữ liệu và làm quen với GraphQL.

Tổng kết

Qua bài này mình đã giúp các bạn các liên kết Gatsby với WordPrPress. Qua bài sau mình tiếp tục hướng dẫn các bạn render Header trên Gatbsy nhé.

Cảm ơn các bạn.