Logo

0x5a.live

for different kinds of informations and explorations.

GitHub - hungtuchen/relay-chat: an chat example showing Relay with routing and pagination

an chat example showing Relay with routing and pagination - hungtuchen/relay-chat

Visit SiteGitHub - hungtuchen/relay-chat: an chat example showing Relay with routing and pagination

GitHub - hungtuchen/relay-chat: an chat example showing Relay with routing and pagination

an chat example showing Relay with routing and pagination - hungtuchen/relay-chat

Powered by 0x5a.live ๐Ÿ’—

Relay Chat

I no longer maintain this project. Since it is a demonstration, you can still fork and play with it

Installation

npm install --global babel
npm install

Running

Start a local server:

npm start

Developing

Any changes you make to files in the js/ directory will cause the server to automatically rebuild the app and refresh your browser.

If at any time you make changes to data/schema.js, stop the server, regenerate data/schema.json, and restart the server:

npm run update-schema
npm start

Feature Highlight:

  1. use with relay-nested-routes and react-router to let multiple routes work and route params as query params

  2. using route params as global state variable (ex: currentThreadID), not ideal for now, but it shows a different possibility

  3. and a more complicated model structure as user-> threads-> messages

  4. pagination for messages

Advice

If you don't know much about GraphQL and Relay, I suggest you:

  1. To know GraphQL first (at least things before introspection part)
  2. Know how Relay connect to GraphQL (and the series below)
  3. Last, learn Relay (and the series below)

I tried these 3 steps in reverse, and I went step by step again.

React JS Resources

are all listed below.

Resources

listed to get explored on!!

Made with โค๏ธ

to provide different kinds of informations and resources.