React with GraphQL - Fullstack Boilerplate

Fullstack React Boilerplate with GraphQL, Apollo & Prisma

Boilerplate para una aplicación de React. Está basada en las siguientes tecnologías:

React.js

Apollo Client

GraphQL Yoga

Prisma

Antes de cualquier otra cosa hay que tener instalado Prisma

  npm install -g prisma

Primero vamos a iniciar nuestro servidor de Prisma
```
  prisma init
```
- Seleccionamos 'Demo Server' si no tenemos ningún server configurado en la consola de Prisma.
- Escogemos el servidor con mejor latencia.
- Insertamos un nombre para el servicio de Prisma.
- Insertamos el nombre para el stage.
- Seleccionamos 'Dont generate' en el lenguaje de programación.
Configuramos el archivo 'prisma.yml'
- Para mayor seguridad, en las variables de entorno, en el apartado de 'PRISMA_ENDPOINT' ponemos el link que tenemos en el archivo 'prisma.yml' (el endpoint del servidor) y modificamos dicho archivo de la siguiente manera:
  
  El apartado secret tiene que ser descomentado cuando se pase a producción.
Hacemos el deploy del servidor de prisma para que se generen los archivos necesarios faltantes
- Renombramos el archivo 'variables.env.sample' a 'variables.env' y luego hacemos el deploy
```
  prisma deploy --env-file variables.env
```
Comandos paa ejecutar la app:
- Backend
  - Para abrir un 'Playground' para probar querys/mutations de graphQL con la base de datos:
```
  npm run dev
```
  - Para hacer un deploy de Prisma:
```
  npm run deploy
```
- Frontend
  - Para abrir la aplicación en el puerto 3000
```
  npm start
```

El archivo que esta en 'src/generated' es el archivo generado por Prisma en cada deploy y tiene todos los métodos para los mutations y los querys a nivel del servidor.
El archivo 'schema.graphql' que está en 'src' deberá tener todos mutations y querys que se podrán generar en el frontend.
En la carpeta 'resolvers' están todos los métodos que van a traer/llevar la información de/a la base de datos.
En el archivo 'datamodel.prisma' estrán todos los modelos que van a intervenir en la aplicación, como por ejemplo:

Boilerplate con base al curso de @wesbos Advanced React