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

Ngày đăng: 28 - 04 - 2020 Lượt xem: 879 lượt

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

Gatsby-link-wordpress

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 SEOACF Ở 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

Gatsby-link-wordpress-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:

Gatsby-link-wordpress-graphql-render

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.

5 1 vote
Đánh giá bài viết

Nhận thông báo
Nhận thông báo cho
guest

0 Góp ý
Inline Feedbacks
View all comments

Bài viết liên quan

Thêm pagination và sidebar vào archive template trên Gatsby

Thêm pagination và sidebar vào archive template trên Gatsby

05 - 06 - 2020

Trong bài trước mình cùng mọi người cách tạo archive template trên Gatsby. Bài viết lần này mình và các...

Làm Archive template trên Gatsby

Làm Archive template trên Gatsby

02 - 06 - 2020

Trong bài trước mình cùng mọi người làm  sidebar cho page template trên Gatsby. Thì với bài viết này chúng...

Thêm sidebar vào page template trên Gatsby

Thêm sidebar vào page template trên Gatsby

27 - 05 - 2020

Trong bài trước mình cùng mọi người làm  page template trong Gatsby. Thì hôm nay mình tiếp tục hướng...

Làm Page template trên Gatbsy

Làm Page template trên Gatbsy

25 - 05 - 2020

Trong bài trước mình cùng mọi người luyện tập sử dụng custom field từ WordPress để render phần tin...

Render Tin tức mới của homepage trên Gatsby

Render Tin tức mới của homepage trên Gatsby

18 - 05 - 2020

Trong bài trước mình cùng mọi người luyện tập sử dụng custom field từ WordPress để render sang giao...

Render slider và CTA images của homepage trên Gatsby

Render slider và CTA images của homepage trên Gatsby

17 - 05 - 2020

Trong bài trước mình đã hướng dẫn các bạn render footer từ WordPress sang Gatsby. Nói đơn giản là các...

0
Would love your thoughts, please comment.x