Consumiendo una API GraphQL con JS puro

2/16
Recursos

Aportes 11

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Hola compa帽eros, les dejo el link al repo https://github.com/jonalvarezz/platzi-graphql-fullstack

C贸digo de la clase.

const query = `
  query{
    avos{
      id
      image
      name
      createdAt
      sku
      price
      attributes {
        description
        taste
        shape
        hardiness
      }
    }
  }
`

const baseURL = process.env.NEXT_PUBLIC_SERVICE_URL

const requester = (endpoint?: string, data?: Record<string, number | string>) =>
  fetch(`${baseURL}${endpoint}`,{
      method:'POST',
      headers: {
        'content-type': 'application/json'
      },
      body: JSON.stringify(data)
  })

const useAvocados = () => {
  const [data, setData] = useState<TProduct[]>([])
  const [status, setStatus] = useState<'success'| 'loading' | 'error' | 'idle'>('idle')

  useEffect(()=>{
    const fetchItems = async () => {
      setStatus('loading')
      try {
        const response = await requester('/graphql', { query })

        const { data } = (await response.json()) as { data: TProduct[]}
        setData(data)
        setStatus('success')
      } catch (error) {
        setStatus('error')
      }
    }
    fetchItems()
  }, [])

  return {
    data,
    status
  }

}

En vista que la api de avocados no funciona actualmente, estar茅 usando la api de platzi pero orientada a graphql : link
Pueden entrar y hacer sus peticiones de graphql(queries):

query{
  products{
    id
    title
    price
  }
}

Mutations:

mutation{
   addProduct(data:{
    title: "este es  un titulo"
    price: 22
    description:"esta es una descripcion"
    categoryId:4
    images: [
      "https://api.lorem.space/image/shoes?w=640&h=480&r=395"
    ]
  }){
    id
  }
}

Se帽ores debemos encontrar soluciones y adaptarnos a ellas鈥 馃挭

Hola, si estan usando una version de Node mayo a la 14, deben cambiarla en el archivo Packge.json donde dice engines, en mi caso qued贸 de la siguiente manera

"engines": {
    "node": "16.x"
  },

Listo para subir el nivel con Next.Js y Graphql

la api de heroku est谩 dada de baja, 驴se puede tomar otro recurso?

Alternativas para practicar mientras el Server de GraphQL usado en clase siga ca铆do:

https://www.apollographql.com/blog/community/backend/8-free-to-use-graphql-apis-for-your-projects-and-demos/

segundo problema - uso node 16.13 , toca usar nvm鈥

Intente automatizar nvm , pero no logre hacer que funcionara ninguna de las configuraciones mencionadas en su doc.

Me encontre una alternativa mas comoda e inteligente
Volta para gestionar y estandarizar dependencias Node, Yarn NPM por proyecto, sin tener que cambiar la version global cada que salto de un proyecto a otro u abro un terminal.

Les dejo el link a su doc
https://docs.volta.sh/guide/getting-started

Aqu铆 les dejo el comando para copiar y pegar:

git clone git@github.com:jonalvarezz/platzi-graphql-fullstack.git nextjs-graphql

rallos, solo habia usado npm鈥 espero no me de muchos dolores yarn. ademas tenia una ext para ejecutar por atajos los comandos del package u.u