我尝试了一下WordPress的GraphQL插件

1 年 ago
科, 颖
3 minutes

首先

最近，我在研究未来可能流行的GraphQL+Headless CMS，偶然发现WordPress也有可以实现GraphQL的插件，便决定试用一下。鉴于目前关于此插件的日语文档较少，因此我在这里撰写了一篇文章。

验证环境

    • macOS 10.13.16

 

    • Docker

 

    • WordPress5.2.2

Dockerのコンテナを使っています

安装

wp-graphqlはプラグインディレクトリからインストールすることができません（07/30時点）
プラグインのソースコードがGitHubに公開されていますので、それを使います

安装插件

wp-graphql

WordPressをGraphQLサーバにするプラグイン

wp-graphiql

WordPressの管理画面上で、GraphQLを実行できるプラグイン

程序

移动到WordPress的插件目录下。

cd html/wp-content/plugins

请根据各自的环境来调整目录。

克隆Git库

git clone https://github.com/wp-graphql/wp-graphql.git
git clone https://github.com/wp-graphql/wp-graphiql.git
    ReleasesからZIPをダウンロードしたほうがよいと思いますが、ローカル環境だし、今後のバージョンアップ時にgit pullの方が簡単なので、git cloneにしました

登录WordPress并启用插件。

image.png
image.png

我会把以下的查询粘贴到窗口左侧。

{ 
  posts{ 
    edges { 
      node { postId title link date }
      }
    } 
}

点击上方的箭头按钮即可执行。

image.png
image.png

查询的示例

    投稿と固定ページのデータを取得するためのクエリサンプルです

获取一个帖子

{
  postBy(postId:1){
    title date link
  }
}

获取一个固定页面

{
  pageBy(pageId:2){
    title date link
  }
}

获取最近的5篇帖子

{ 
  posts(first:5) { 
    edges { 
      node { postId title link date }
    } 
  }
}

获取最新的5个帖子，并带有分类信息。

{ 
  posts(first:5) { 
    edges { 
      node { postId title link date 
        categories {
          edges { node { id name } }            
        }
      }
    } 
  }
}

获取分类ID为2的最近5篇发布的文章。

{ 
  posts(first:5,where:{categoryId: 2}) { 
    edges { 
      node { postId title link date 
        categories {
          edges { node { id name } }            
        }
      }
    } 
  }
}

获取一个帖子和一个固定页面

{ 
  postBy(postId:1) { 
        postId title link date
  },
  pageBy(pageId:2){
    title date link
  }
}

REST APIだと２回APIをコールしないといけないが、GraphQLだと1回ですみますね

如果通过curl进行访问的话

    • curlからアクセスする場合、パーマリンク設定が基本になっていると、/graphqlが404エラーになります。基本以外の設定に変更します

 

    httpクライアントであるcurlからGraphQLを実行する場合はこのようなシェルを用意しておきます
#!/bin/sh
curl \
-X POST \
-H 'content-type: application/json' \
--data @- \
http://localhost/graphql

接下来我们将查询部分保存为JSON文件。

{ 
    "query":"{ posts { edges { node {postId title} } } }" 
}

将json文件通过标准输入传递给shell

sh curl.sh < get-posts.json

我认为将查询部分分解成单独的文件可以轻松执行各种查询。

与 REST API 进行对比

REST API: REST应用程序编程接口

    WordPressにはREST APIが搭載されています。そのAPIで投稿を取得するとこのようになります。レスポンスはフォーマットかけてます。レスポンスが長いですね〜

请求

curl http://localhost/wp-json/wp/v2/posts/1

回应

{
    "id": 1,
    "date": "2019-07-30T16:38:46",
    "date_gmt": "2019-07-30T07:38:46",
    "guid": {
        "rendered": "http:\/\/localhost\/?p=1"
    },
    "modified": "2019-07-31T15:47:50",
    "modified_gmt": "2019-07-31T06:47:50",
    "slug": "hello-world",
    "status": "publish",
    "type": "post",
    "link": "http:\/\/localhost\/2019\/07\/30\/hello-world\/",
    "title": {
        "rendered": "Hello world!"
    },
    "content": {
        "rendered": "\n<p>WordPress \u3078\u3088\u3046\u3053\u305d\u3002\u3053\u3061\u3089\u306f\u6700\u521d\u306e\u6295\u7a3f\u3067\u3059\u3002\u7de8\u96c6\u307e\u305f\u306f\u524a\u9664\u3057\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u4f5c\u6210\u3092\u59cb\u3081\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n",
        "protected": false
    },
    "excerpt": {
        "rendered": "<p>WordPress \u3078\u3088\u3046\u3053\u305d\u3002\u3053\u3061\u3089\u306f\u6700\u521d\u306e\u6295\u7a3f\u3067\u3059\u3002\u7de8\u96c6\u307e\u305f\u306f\u524a\u9664\u3057\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u4f5c\u6210\u3092\u59cb\u3081\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n",
        "protected": false
    },
    "author": 1,
    "featured_media": 0,
    "comment_status": "open",
    "ping_status": "open",
    "sticky": false,
    "template": "",
    "format": "standard",
    "meta": [],
    "categories": [
        2,
        1
    ],
    "tags": [],
    "_links": {
        "self": [
            {
                "href": "http:\/\/localhost\/wp-json\/wp\/v2\/posts\/1"
            }
        ],
        "collection": [
            {
                "href": "http:\/\/localhost\/wp-json\/wp\/v2\/posts"
            }
        ],
        "about": [
            {
                "href": "http:\/\/localhost\/wp-json\/wp\/v2\/types\/post"
            }
        ],
        "author": [
            {
                "embeddable": true,
                "href": "http:\/\/localhost\/wp-json\/wp\/v2\/users\/1"
            }
        ],
        "replies": [
            {
                "embeddable": true,
                "href": "http:\/\/localhost\/wp-json\/wp\/v2\/comments?post=1"
            }
        ],
        "version-history": [
            {
                "count": 1,
                "href": "http:\/\/localhost\/wp-json\/wp\/v2\/posts\/1\/revisions"
            }
        ],
        "predecessor-version": [
            {
                "id": 9,
                "href": "http:\/\/localhost\/wp-json\/wp\/v2\/posts\/1\/revisions\/9"
            }
        ],
        "wp:attachment": [
            {
                "href": "http:\/\/localhost\/wp-json\/wp\/v2\/media?parent=1"
            }
        ],
        "wp:term": [
            {
                "taxonomy": "category",
                "embeddable": true,
                "href": "http:\/\/localhost\/wp-json\/wp\/v2\/categories?post=1"
            },
            {
                "taxonomy": "post_tag",
                "embeddable": true,
                "href": "http:\/\/localhost\/wp-json\/wp\/v2\/tags?post=1"
            }
        ],
        "curies": [
            {
                "name": "wp",
                "href": "https:\/\/api.w.org\/{rel}",
                "templated": true
            }
        ]
    }
}

GraphQL 图形查询语言

请求

curl http:/localhost/graphql -X POST -H 'content-type: application/json' --data '{ "query" : "{ postBy(postId:1) { postId title link date }}" }'

回应

{"data":{"postBy":{"postId":1,"title":"Hello world!","link":"http:\/\/localhost\/2019\/07\/30\/hello-world\/","date":"2019-07-30T16:38:46"}}}

這個回答非常簡單明瞭，讓人感到清爽舒適。

“使用WordPress的GraphQL插件时的场景”

    • WordPressで構築したサイトでテンプレート(function.phpあたり）を作れる人がいない。または、時間が取れない

 

    WordPressで管理しているデータを別サイトで使いたい

如果处于这种情况，我认为你可以使用这个插件，通过JS使用GraphQL来获取数据，这样可以很快实现。当然，REST API也行，但如果使用GraphQL，你可以在初次访问时通过一个API获取所需数据并存储在本地存储中，以便复用。

在GraphQL+Headless CMS中使用WordPress

如果从一开始就要使用Headless CMS，我个人会选择另一个CMS。但是，由于国内没有这样的CMS，所以我们将不得不采用海外的CMS。在这种情况下，CMS管理界面可能会变成英文，而且可能无法获得日语支持。在这种情况下，引入将变得困难。考虑到WordPress的知名度和免费性质，以及通过搜索可以找到各种信息并且有很多人可用，它就成为一个选择。

最终

    • 今回はセキュリティまわりに触れていません。GraphQLを使ってデータの登録や削除もできますので、本番環境に適用する場合にはセキュリティには注意しましょう。さすがに認証が必要と思われますが、未検証です。

 

    • 今回使ったプラグインは、まだ1.0として公開されていません。そのあたりにも注意しましょう

 

    登録や削除のクエリは別の機会に試してみたいと思います
✖
广告
将在 10 秒后关闭
bannerAds