React Infinite With Navigation Using Meteor And Apollo (GraphQL)

Infinite scroll with navigation using the react-bootstrap Pagination component, meteor, and the apollo project

• loads results on forward scroll only
• can handle sudden quick scrolls in either direction
• easily change the minimum number of results per load
• having navigation links allows for faster traversal of results
• uses the javascript meteor platform
• uses the apollo stack for a graphql sql db connection

JSFiddle example of react-infinite-with-navigation

npm install meteor-apollo-react-infinite-with-navigation

To create a test database

This example pulls names from a mysql database. In order to create the test db, enter a user name and password for the sql connection in programs/insert.js.

Then run the script: node programs/insert.js.

To run the example

cd meteor-apollo-react-infinite-with-navigation

meteor

open localhost:3000 in your browser to see the example

graphiql is available at localhost:4000