graphql-engine/community/sample-apps/react-relay
Praveen Durairaju 0ff26100bf update docs link to avoid redirects
GitOrigin-RevId: 1f2a1d21bfb9b2908d56305fa2dfb69270deafdf
2021-03-01 18:51:18 +00:00
..
public docs: content for Relay docs and example repo (close #4912) (#5150) 2020-06-23 13:08:41 -07:00
src allow array relation connection fields regardless of aggregation permission & change relay endpoint to '/v1beta1/relay' (fix #5218) (#5257) 2020-07-03 12:00:35 +05:30
.babelrc docs: content for Relay docs and example repo (close #4912) (#5150) 2020-06-23 13:08:41 -07:00
.gitignore docs: content for Relay docs and example repo (close #4912) (#5150) 2020-06-23 13:08:41 -07:00
package.json docs: content for Relay docs and example repo (close #4912) (#5150) 2020-06-23 13:08:41 -07:00
README.md update docs link to avoid redirects 2021-03-01 18:51:18 +00:00
relay.config.js docs: content for Relay docs and example repo (close #4912) (#5150) 2020-06-23 13:08:41 -07:00
schema.graphql Support Postgres POSIX regex operators (close #4317) (#119) 2020-11-27 10:54:52 +00:00
yarn.lock docs: content for Relay docs and example repo (close #4912) (#5150) 2020-06-23 13:08:41 -07:00

Pagination demo with React, Relay, and Hasura

This app demonstrates pagination using Hasura with Relay. It's for demo purposes only, and not a complete boilerplate app.

Setup

  • Create the following tables via the Hasura console:
    • reviews
      • columns: id, body, created_at, restaurant_id
    • restaurants
      • columns: id, name, cuisine
  • Create a one-to-many relationship between the tables.
  • Using the Hasura console, add some rows to both tables. Add at least four reviews since the sample code loads three reviews at a time.
  • Using your Relay endpoint from Hasura (/v1beta1/relay), export your GraphQL schema by following the instructions here (to replace schema.graphql at the root of this project).
  • In fetchGraphQL.js, set the GraphQL endpoint to your Relay endpoint.
  • In App.js, replace MY_RESTAURANT_ID with a restaurant id from your database (This is for demo purposes; normally you'd pass in the id via routing).
  • In your Terminal, at the root of the app:
    • Run yarn install.
    • Run the Relay complier with yarn run relay --watch.
    • In a separate tab, run the React app with yarn start.
  • Open http://localhost:3000 to view the app in your browser.
  • Click the Load More button to load more reviews.

For more information on Hasura's Relay API, see the Hasura docs.