mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-12-15 09:22:43 +03:00
0ff26100bf
GitOrigin-RevId: 1f2a1d21bfb9b2908d56305fa2dfb69270deafdf |
||
---|---|---|
.. | ||
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.