mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-12-15 17:31:56 +03:00
7b31ff99d1
Co-authored-by: christophediprima <dipdipdip84@gmail.com> Co-authored-by: dip <dipdipdip84@gmail.com> Co-authored-by: Auke Booij <auke@hasura.io> Co-authored-by: Antoine Leblanc <antoine@hasura.io> GITHUB_PR_NUMBER: 6172 GITHUB_PR_URL: https://github.com/hasura/graphql-engine/pull/6172 GitOrigin-RevId: 5192d238b527cd21b6efb2f74e279ecc34756c29 |
||
---|---|---|
.. | ||
public | ||
src | ||
.babelrc | ||
.gitignore | ||
package.json | ||
README.md | ||
relay.config.js | ||
schema.graphql | ||
yarn.lock |
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
- columns:
restaurants
- columns:
id
,name
,cuisine
- columns:
- 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 replaceschema.graphql
at the root of this project). - In
fetchGraphQL.js
, set the GraphQL endpoint to your Relay endpoint. - In
App.js
, replaceMY_RESTAURANT_ID
with a restaurantid
from your database (This is for demo purposes; normally you'd pass in theid
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
.
- Run
- 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.