GraphQL API y autogeneración de código

Para no tener que tipear cada que quieres levantar el server las variables de entorno puedes crear un archivo .env en la raíz del proyecto y ahí colocar los datos.

<code> 
NEXT_PUBLIC_SPACE_ID=${TU-SPACE-ID}
NEXT_PUBLIC_ACCESS_TOKEN=${TU-ACCESS-TOKEN}

Si no conoces nada de GraphQL te explico rapido.

GraphQL es es un lenguaje de consulta para APIs, y un entorno de ejecución para realizar consultas con datos.​ Es desarrollado por Facebook y lo increible es como si pareciera Algo a SQL pero para traer o manipular datos.

Hay muchas formas de poder usar GraphQL con JavaScript

Aqui te dejo un link https://graphql.org/code/#javascript de como integrar graphql
En conquetro me gusta usar Apollo

Te dejo el curso de GraphQL de Platzi

y

Un curso de Youtube muy bueno de GraphQL https://www.youtube.com/watch?v=Wl8O6wW4FJU&

Les recomiendo este curso en youtube de GraphQL es excelente para entender lo que está sucediendo.

https://www.youtube.com/watch?v=qux4-yWeZvo

{
  plantCollection (limit: 10){
    total
    limit
    items{
      plantName
      author{
        fullName
      }
    }
  }
}

La URL a la documentación para acceder a GraphiQL:
https://www.contentful.com/developers/docs/references/graphql/#/reference/exploring-the-schema-with-graphiql

Es posible que al momento de arrancar el proyecto les muestre este error:

Lo pude solucionar provisionalmente cambiando la linea 1 del archivo theme.ts que se encuentra en la carpeta UI de la siguiente forma:

Como estaba:

import createMuiTheme from '@material-ui/core/styles/createMuiTheme'

Como lo coloqué:

import { createMuiTheme } from '@material-ui/core/styles'

Por ahora soluciona el inconveniente pero ahora muestra una advertencia de que createMuiTheme es una función deprecada, si alguien conoce una mejor forma de adaptar el código es bienvenida.

Aqui les dejo los shortcuts principales
yo no me los sabia jaja y tenia temas con el auto completado

↑ Shift + Ctrl + P
Prettify query

Ctrl + ⤶ Enter
Run query

Ctrl + Space
Auto-complete

https://defkey.com/graphiql-shortcuts

Aquí está la url para acceder al explorador de Graphql

https://graphql.contentful.com/content/v1/spaces/%7BSPACE%7D/explore?access_token={CDA_TOKEN}

La función fetchPlants

const fetchPlants = () => fetch('https://graphql.contentful.com/content/v1/spaces/<space>', {
    method: 'POST',
    headers: {
      'Content-type': 'application/json',
      Authorization: 'Bearer <Token>',
    },
    body: JSON.stringify({
      query: `{
        plantCollection (limit:10){
          total
          limit
          items{
            plantName
            author{
              fullName
              }
          }
        }
      }`
    })
  },
  )

En el curso de Next.js con GraphQL en la clase auto generacion de codigo se muestra en detalle todo lo que hizo el profesor con la herramienta de auto generacion de codigo.
Asumo que como ya explicó el uso de esa herramienta ya no era necesario volver a explicarlo y solo optó por nombrarla.

Para no estar escribiendo las variables de entorno cada vez que levantemos nuestro server, dentro del archivo next.config.js hacemos los siguiente:

const TU_SPACE_ID = 'tu space id';
const TU_ACCESS_TOKEN = 'tu access token';

module.exports = {
  env: {
    NEXT_PUBLIC_SPACE_ID: TU_SPACE_ID,
    NEXT_PUBLIC_ACCESS_TOKEN: TU_ACCESS_TOKEN,
  }
}

De esta manera next tendra a la mano tus variables de entorno. deben reiniciar el server a la hora de agregar este codigo.

Para ahorrar tiempo con las variables de entorno cuando se inicia el server las incluí en el archivo next.config.js como muestra la bibliografía oficial :

https://nextjs.org/docs/api-reference/next.config.js/environment-variables

Y así solo necesitamos npm run dev sin las largas variables

Hola les dejo esta excelente introduccion a Graphql

https://www.youtube.com/watch?v=CFrKTrMJIBY&t=1612s&ab_channel=LaithHarb