UPDATE: I have since created newer version of this project using Vue instead of React. それについて読むべきです！

Index:
Part 2 – The Setup
Part 3-The Schema

次の週では、一連の記事を通じて、Apollo を使用してデータを取得し React コンポーネントにパイプする MYSQL WordPress データベースに接続された GraphQL サーバーとバックエンドで Node.js と Express を使用している方法について説明します。

これが口語に聞こえるなら、それはその通りだからです。 特に、これが GraphQL と Apollo への最初の進出であるため、困難が伴いました。 物事は変化します。 変更は良いことです。

この投稿では、その理由を説明します。 すべての Web サイトの 25% が WordPress で構築されています。 素晴らしい CMS であり、素晴らしいコミュニティがあり、素晴らしいサポートがあります。 コンテンツの管理は簡単で、これはどのCMSでも最大の目標です。

ncludでは、毎日WordPressサイトを開発しています。 WordPress の Web サイトを管理するのは楽しいことです。 それらを開発することは、そうではありません。 私は、アイソモーフィックな Javascript アプリケーションがどのように見え、感じられるかを経験した Javascript 開発者として、このように言っています。 Javascriptは、私をtwitterで興奮させました。

なんて言ったらいいんでしょう。 私は PHP が好きではありません。 テンプレートは好きではありません。 私は「ループ」が好きではありません。 Node、Express、Webpack、React、Babel、そして今は Graph QL と Apollo に甘んじています。

The Benefits Of Javascript

私は純粋にフロントエンド開発サイドからこの話に入っています。 Node と Express は素晴らしいものですが、私にとってこのセットアップの主な原動力は、React と CSS-Modules で ES2015 を使用できることです。

それなりの規模のウェブサイトまたはアプリケーションを開発および保守する最大の課題は、ものを壊すことなく変更（新しい機能の追加や既存のものの変更）を優雅に処理できることです。 これは通常、スタイルの適用または変更が意図しない結果をもたらさないことを確認することを含みます。 CSSがグローバルに適用されることを考えると、これは難しいことです。 この痛みを和らげるために作成された CSS 全体の方法論 (SMACSS、BEM など) がありますが、難解な命名規則を含むか、あるいは、多数の異なるクラス名を覚える必要があります。 すべてのコンポーネントは独自のスタイルを持ち、他のスタイルまたは一連のグローバルなスタイルに対して CSS クラスを構成する機能があります。 これは非常に強力です。

また、インライン スタイルを作成したり、JSXStyles や無数の他のソリューションを使用したりすることもできます。 再利用可能であり、プラグイン可能です。 スタイルはコンポーネントにローカルにスコープされるので、他の何かを壊すことを心配することなく、自由に追加および削除できます。

別の利点は、アプリケーションまたはウェブサイトの状態をはるかに優雅な方法で処理できることです。 Apollo (これについては別の投稿で説明します) を使用すると、アプリケーション データだけでなく UI の状態も管理できます。 WordPressでは、ウェブサイト全体のイベントやインタラクションを処理する1つの大きなjavascriptファイルを目にすることがあまりに多くあります。 その長いファイルの中で、ある要素がアニメーションを引き起こすべきクラスを持っているかどうかを確認するテストを何度も目にした。

最後に、ユニットテストを実行することもできます。 テストは重要です! Huzzah testing!

Ison WordPress Already doing Node Stuff?

WordPressニュースをフォローしていれば、Wordpressの開発元である Automattic社はNode上に構築した管理インターフェースを開発したと聞いていることでしょう。 それはとても素晴らしく、オープン ソース化されています。 WordPress REST API によって動かされるので、WordPress 関連のすべてのものを JSON で取得し、それを使って魔法をかけることができます。

これはかなりすてきですね。 いくつかの素晴らしいエンドポイントが組み込まれており、また、独自のエンドポイントを作成することも可能です。 V2 のドキュメントは少し不足していますが、私はそれがとても新しいものであるためだと考えています。

私はその結果にひどく満足していませんでしたが、私はそれを 1 日ほど遊び回っただけだと認めます。 また、私はすでに React を使用しているので、エコシステム全体を受け入れるかもしれません。

Enter GraphQL

アプリケーションまたはウェブサイトの UI が必要なデータを駆動できたら素晴らしいと思いませんか？ REST では、サーバーは UI が必要とするすべてのデータを送信し、クライアントは残りを整理します。

GraphQL では、クライアントは必要なデータの関係を判断し、1 つのクエリを実行してすべてを取得します。 トリップは 1 回だけです。

GraphQL vs. Rest については、こちらを参照してください。

次のステップ

次回の投稿では、基本的な Node.js/Express 設定と基本的な GraphQL サーバーを設定する方法を説明します。 また、SASS で CSS モジュールを処理するために Webpack をどのように使用しているか、ホット モジュール置換がどのように機能するかを説明します。 また、WordPressのMYSQLデータベースへの接続を作成するためにSequelizeを使用することで、SQLクエリを1行も書く必要がないことを意味します。 Wizardry!

一方、Github リポジトリに、このプロセスの現在の位置を保存しています。 基本的な Post と Postmeta のクエリ、および他のいくつかの巧妙なものがあります。 これは明らかにアクティブな開発中で、そこには恥ずかしい間違いがあると思いますので、遠慮なくからかってください。