https://www.graph.cool

GRAPHCOOL

GRAPHCOOLはGraphQLのバックエンドを構築できるサービスです。

GraphQLフレームワークはApolloとRelayに対応しており、AngularやReact、Vueの動作するWeb上の環境に加え、ReactNativeやiOS、Androidの開発にも利用できます。

資料やサンプルがとても充実しています。 Reactは自由度が高くどうにでもなってしまうので、Angularのサンプルを読み進めることをお勧めします。

https://github.com/graphcool-examples/angular-graphql

開発環境の構築

初回はgraphcoolをインストールします。

$ npm i -g graphcool

次にプロジェクトを生成します。これは既存のプロジェクトの中で行います。

$ graphcool init --schema http://graphqlbin.com/instagram.graphql
✔ Authenticated user: uufish.io@sankaku.io
✔ Created project Rainbowgambler Mask (ID: cj6z14krf100y01348om5n04o) successfully.
Here is what you can do next:
1) Open project.graphcool in your editor to update your schema.
You can push your changes using `graphcool push`.
2) Use one of the following endpoints to connect to your GraphQL API:
Simple API:   https://api.graph.cool/simple/v1/xxxxxx
Relay API:    https://api.graph.cool/relay/v1/xxxxxx
3) Edit your project using the Console. Run `graphcool console` to open it.

ここでschemaを設定しているのは、テンプレートのようなものです。

初期化が終わると、project.graphcoolというファイルが生成されます。これはプロジェクトのTYPESです。

$ graphcool console

同時にブラウザ上のWebアプリではQueryやMutationを送信したり、 確認したりできます。

開かれるプロジェクトのIDとproject.graphcoolのコメントアウトのIDが一致しており、SETTINGSから確認できます。

ローカルでTYPESを書き換えた場合はpushすることができます。

フロントエンドの開発

cloneした開発環境ですが、バックエンドがGRAPHCOOLに差し代わるのでアプリケーションサーバーやデータベースを起動する必要はありません。少しのパーサーを除いてAngularの標準の構成になっています。

$ ng serve

GraphQLのフレームワークにはApolloが使用されていますが、これもGRAPHCOOLに依存するものではありません。ここで先ほどのターミナルに出力されたAPIエンドポイントを使用します。

Simple API:   https://api.graph.cool/simple/v1/xxxxxx

忘れてしまっても問題ありません、xxxxの部分をプロジェクトIDに差し替えるだけです。プロジェクトIDはproject.graphcoolに書いてあります。

export const __SIMPLE_API_ENDPOINT__: string = 'https://api.graph.cool/simple/v1/xxxxxx'

instagram-example#2-create-graphql-api-with-graphcool
const networkInterface = createNetworkInterface({ uri: __SIMPLE_API_ENDPOINT__ })

__SIMPLE_API_ENDPOINT__を変数に書き換えることに注意してください。

最初の投稿が反映されました。

あなたはこのmutationについてapp/new-post.componet.tsから見ることができます。

this.apollo.mutate({
mutation: gql`
mutation ($description: String!, $imageUrl: String!){
createPost(description: $description, imageUrl: $imageUrl) {
id
}
}
`
,
variables: {
description: this.description,
imageUrl: this.imageUrl,
},
})

gqlはテンプレート関数であり、この文字列をオブジェクトに変換します。この$description$imageUrlは変数を意味しvariablesで初期化されています。

送信されたデータはコンソールから確認できます。

これから

GRAPHCOOLから独自のサーバーへ移行したい時、Apolloのエンドポイントを差し替えるだけで可能です。また、project.graphcoolは少し特殊かもしれませんが、言語仕様を理解していれば書き換えるのは簡単です。

独自のサーバーをApolloを使ったWebアプリケーション開発するとき、Dockerの構築、GraphQLのQueryを処理するresolver、socket.ioの接続、など多くの時間を必要とします。

最後に、Apolloは複数のエンドポイントを設定することができます。それはネットワークインターフェースを複数作成し、オブジェクトを返すプロバイダにするだけです。これについてはこちらの記事に詳しく書かれています。