A starter template for React while using one of the Graphback based backend templates.
This project has been created using Graphback. Run the project using the following steps:
- Install
yarn install
- Start React App
In the client
directory run:
yarn start
NOTE: The client application has been made for a sample model. When you make changes on the server side, the client side application will NOT change itself automatically and will require manual changes to be made.
The following tools and technologies have been used to create this template:
-
GraphQL: GraphQL is an open-source data query and manipulation language for APIs which was publically released by Facebook in 2015.
-
Apollo Client: Apollo Client provides a neat abstraction layer and an interface to interact with the GraphQL server. It allows easier building of UI components that fetch data via GraphQL.
-
React: React is an open-source JavaScript library for building user interfaces or UI components which is maintained by Facebook and a community of individual developers and companies.
-
Material UI: Material-UI is an open-source project that features React components that implement Google's Material Design. It has been used for styling this sample React template.
-
GraphQL Code Generator: GraphQL Code Generator is a tool that generates code out of your GraphQL schema by analyzing it.
The project contains the following set of source files.
- The
.graphlrc.yml
file defining the configuration like the path to business model declaration, how to perform code generation from the GraphQL types to Typescript types etc. The configuration file is defined using the GraphQL project usinggraphql-config
. - A
public
folder which contains static files. - A
src
folder which has:- A
components
folder defining react components for each type of business model. - A
graphql
folder which contains a generatedgraphback.graphql
using the generate command and a customgetDraftNotes.graphql
. You can add additional custom GraphQL files according to your needs. - A
generated-types.tsx
file, which is also generated as indicated by its name. See Generating types - The rest of the files are to initialize a standard ReactJs Progressive Web App.
- A
NOTE: All the files can be edited according to your needs except for those that are generated (no need to edit them as they'll be re-generated anyway).
The client is designed to work only with the sample schema. When changing the Graphback schema you will need to recompile all the changes.
- Generate React components
yarn generate
Running yarn generate
executes a script which relies on two things, Graphback CLI and Codegen. It is a two step process which is explained below.
NOTE: You have to run the above commands on each modification of your business model on the server-side. This ensures that the client is kept in sync with changes on the server-side.
A GraphQL schema describes the functionality available to the client applications that connect to it. The Graphback CLI is used to run the graphback generate
command which executes the generation process to create a graphql schema. This schema is stored in the graphback.graphql
file.
The next step is to use this schema to create the TypeScript types. Codegen is used in the graphql codegen
command which generates this code from the GraphQL schema in the generated-types.tsx
file. This makes sure that whenever you make changes to your data model you don't have to manually change the file because running yarn generate
does that for you.