WhatsApp Clone using React (Hooks+Suspense), GraphQL, Apollo, TypeScript and PostgreSQL はまんま WhatsApp で Redux そこにはいなかった

Fully functional WhatsApp Clone using React (Hooks+Suspense), GraphQL, Apollo, TypeScript and PostgreSQL はタイトル通りに React、GraphQL、Apollo、PostgreSQL、TypeScript が使われて、次期の React で期待されています。 Hooks、Suspense も使われている。まだチュートルアルが準備中のようでしたが、この手順でセットアップができました。

WhatsApp-Clone はGraphQL Module で機能が分割されて、その中でスキーマやリゾルバが定義されているのは、ドメインの分離ができていてよさそうに思えた。 2019 年の React は Redux を使わなくなりそうな感じですが、問題に対するアプローチをしていてしています。

Setup

• WhatsApp-Clone-Server
• WhatsApp-Clone-Client

Server

• PostgreSQL が必要なので Docker Compose を利用します。 (Docker は便利すぎるチュートリアルでも採用されるかな)

$ git clone https://github.com/Urigo/WhatsApp-Clone-server.git whatsapp-server-express
$ cd whatsapp-server-express
$ touch docker-compose.yml
$ docker-compose up -d
$ yarn install
$ yarn start --add-sample-data

Docker Compose のサンプル

• ormconfig.json に PostgreSQL の接続情報が記載されてるので environment に指定します。

docker-compose.yml

version: "3"
services:
  postgres:
    image: postgres
    ports:
      - 5432:5432
    environment:
      - POSTGRES_USER=test
      - POSTGRES_PASSWORD=test
      - POSTGRES_DB=whatsapp
    volumes:
      - postgres:/var/lib/postgresql/data
volumes:
  postgres:

Client

• クライアントは README の通りです。 http://localhost:3000/ にアクセスするとサインインが表示されます。

$ git clone https://github.com/Urigo/WhatsApp-Clone-Client-React.git whatsapp-client-react
$ cd whatsapp-client-react
$ yarn install
$ yarn generate
$ yarn start

• ユーザネーム と パスワード は db.ts を参照してください。 パスワードはコメントに記載されています。

• サンプルデータが登録されているとリストが表示されます。

• 2 種類のブラウザを利用すると一人でチャットが楽しめます。

Tutorial TOC

• チュートリアルの目次です。 （これから GraphQL をされるかたも参考になりそうなところがあるかも）

1. Basic Apollo Server
2. graphql-code-generator
3. Mutations
4. Authentication
5. Subscriptions
6. TypeORM with PostgreSQL