Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

como debo preparar una imagen de una API propia para poder tratarla con `gatsby-image`? #2

Closed
horacioh opened this issue Jan 6, 2020 · 3 comments

Comments

@horacioh
Copy link
Owner

@horacioh horacioh commented Jan 6, 2020

Una pregunta... estoy creando un sitio gatsby con api propia, como debería preparar la imagen para poder tratarla con gatsby sharp etc... en graphiql, me parece como un string 🤷‍♂️. mil gracias!

source: https://twitter.com/enmaska/status/1213995669872160768

@horacioh horacioh changed the title Sitio Gatsby con API propia como debo preparar una imagen de una API propia para poder tratarla con `gatsby-image`? Jan 6, 2020
@horacioh

This comment has been minimized.

Copy link
Owner Author

@horacioh horacioh commented Jan 6, 2020

la API es GraphQL? si es GraphQL, podrias agregar la api al schema de Gatsby y poder crear un fileNode con createRemoteFileNode: https://gatsbyjs.org/packages/gatsby-source-filesystem/#createremotefilenode

creo que la API no necesita ser GraphQL, pero yo lo he hecho con una API GraphQL asi que no te puedo decir 100%!

@elgatoflaco

This comment has been minimized.

Copy link

@elgatoflaco elgatoflaco commented Jan 8, 2020

Solucionado!!

La API es php, es de un proyecto antiguo 😅, he usado gatsby-source-apiserver para convertirla en GraphQL.

Luego desde gatsby-nody.js con onCreateNode recorro todos los nodos.

Luego recorro el array de imágenes y las descargo con createRemoteFileNode

Por último con createNodeField creo un nuevo campo y le asigno el valor creado por createRemoteFileNode

exports.onCreateNode = async ({
  node,
  actions: { createNode, createNodeField },
  store,
  cache,
  createNodeId,
}) => {
  if (node.internal.type === "apiInmuebles") {
    if (node.images && !isEmpty(node.images)) {
      var images = await Promise.all(
        node.images.map(async image => {
          let fileNode

          try {
            fileNode = await createRemoteFileNode({
              url: image.url,
              parentNodeId: node.id, // id of the parent node of the fileNode you are going to create
              createNode, // helper function in gatsby-node to generate the node
              createNodeId, // helper function in gatsby-node to generate the node id
              cache, // Gatsby's cache
              store, // Gatsby's redux store
            })
          } catch (e) {
            console.log("e", e)
          }
          if (fileNode) {
            console.log("createdFile node")
            image.localFile___NODE = fileNode.id
            return image
          }
        })
      )

      await createNodeField({
        node,
        name: "images",
        value: images,
      })
    }
  }
}

Mil gracias por tu ayuda!!!

@horacioh

This comment has been minimized.

Copy link
Owner Author

@horacioh horacioh commented Jan 8, 2020

me alegro que ya funcione!

@horacioh horacioh closed this Jan 8, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.