Skip to content

React Admin Dashboard example built with NextJS, Typescript, Apollo Client/GraphQL, Jest and Cypress.

Notifications You must be signed in to change notification settings

ryanmstokes/next-ts-ra-apollo

Repository files navigation

NEXT-TS-RA-APOLLO

This project is an example of how to use the React Admin dataProvider to inject graphQL queried data via Apollo Client into the RA dashboard. The Example shows how to Paginate, Order, Sort and Filter data.

The project is built using Typescript, NextJS/React, React Admin, Apollo Client, GraphQL, React Testing Library, Jest and Cypress.


Getting Started

Dev:

yarn dev

Open http://localhost:3010 with your browser to see the result.

Unit test:

yarn test

e2e test:

yarn e2etest

Production:

yarn build

DATA

The data is taken from the Open graphQL of Space X: https://api.spacex.land/graphql/

React Admin uses a dataProvider.ts file as a type of API adapter mapping calls to different functions that resolve promises and return data (or errors).

See https://marmelab.com/react-admin/DataProviders.html for more info on dataProviders

See "/react-admin/provider.ts" to see how getList will perform a Apollo Client query and return the data to React Admin.

The past missions are display in using a Data Grid template component (*see "/components/missions"), allowing the user to search, sort, order and filter the data within the table that React Admin generates.

About

React Admin Dashboard example built with NextJS, Typescript, Apollo Client/GraphQL, Jest and Cypress.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published