Client side template

The client side template for a web application that uses the Learner Model GQL service is available at https://github.com/PabloSzx/learner-model-gql-template.

Relevant Libraries

The template uses specific libraries to handle specific needs:

Next.js - Fully fledged React framework for web applications.
TypeScript - Superset of JavaScript with Type-safety in mind. It's encouraged but not mandatory, since TypeScript and JavaScript can be mixed.
auth0-react - Authentication
Chakra UI - Simple, Modular & Accessible UI Components
GraphQL Code Generator - Generate code for complete type-safety and easier usage of GraphQL APIs
React Query - Hooks for fetching, caching and updating asynchronous data in React
Valtio - React state management

src/rqClient.ts - React API Client definition, having defined the default behavior like showing a Chakra UI Toast when any error is received from the API.
src/components/Auth.tsx - Basic authentication implementation.

Inside the GraphQL operation, the target project code "example" should be changed accordingly:
src/utils/action.ts#L9 - Custom hook that defines standard usage of action mutation, reusing the authentication project and automatically adding the timestamp field.
src/components/Auth.tsx#L11 - withAuth higher order component that lets protect specific React component to only be rendered if user is authenticated, basic usage example in src/pages/protected.tsx
src/components/MainLayout.tsx - Layout of application
src/components/Navigation.tsx - Navigation bar of application