MeiFagundes / React-TypeScript-RTK-Template

React project base template structured around the Redux Toolkit Style Guide with implemented GraphQL and REST support.

{{applicationName}}

{{applicationDescription}} ## Index

Index

1. About the application
   • Main technologies
2. Dev
   • Extensions for Visual Studio Code
3. Local build
   • Prerequisite
   • How to run
   • How to add a GraphQL query or mutation

About the application

Description about the purpose of the application and the problems it aims to solve. You can also briefly list the main features and then detail them in a How to Use section. If necessary, add images or GIFs to further illustrate.

Main Technologies

List of the main technologies and frameworks used in the project.

• ReactJS
• TypeScript
• Redux
• Redux Toolkit
• RTK Query
• MUI (Material UI)

Dev

Extensions for Visual Studio Code

Required:

• ESLint
• Prettier

Recommended:

• Visual Studio IntelliCode
• GraphQL
• yarn

Local build

Instructions on how to run the application in a local development environment.

Prerequisite

• Node.js

How to run

1. Clone the repository

   git clone https://github.com/MeiFagundes/React-TypeScript-RTK-Template.git

2. Install the dependencies

   yarn install

3. Start the application

   yarn start

How to add a GraphQL query or mutation

1. Save the query to a .graphql file at src/repositories/queries or the mutation at src/repositories/mutations

2. Run the following script to generate the .generated.ts file

   yarn g

3. Add the reducer from the generated class to the store at src/app/Store.ts

   import { api as getExchangeRatesAPI } from '../repositories/queries/GetExchangeRates.generated';
   
   const store = configureStore({
     reducer: {
       (...)
       [getExchangeRatesAPI.reducerPath]: getExchangeRatesAPI.reducer,
     },
     (...)
   });