graphql-engine/community/sample-apps/react-relay

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

• Deploy GraphQL Engine on Hasura Cloud and setup PostgreSQL via Heroku:

  

• 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.