florantara / gatsby-source-mercadolibre

🛍 Gatsby Source plugin to fetch products from Mercado Libre

GatsbyJS plugin that pulls products data from MercadoLibre into GraphQL.

• No user authentication needed, it uses the public resource search from the API.
• Product images are imported into nodes so you can use with gatsby-image.

Setup

1 - Install Package

From the root of your Gatsby site:

npm install gatsby-source-mercadolibre

2 - Configure the plugin in `gatsby-config.js`

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-mercadolibre`,
      options: {
        site_id: `your_site_id`,
        username: `your_username`
      }
    }
  ]
};

🕵🏼‍♀️ Find out your site_id here . Find the username by going to the user Profile under the /perfil url:

Example: In https://www.mercadolibre.com.ar/perfil/FRAVEGA the username is FRAVEGA.

Create Product Pages

This is an example of how you can automatically generate product pages.

1 - Create Pages:

Insert the following code into the file gatsby-node.js.

const path = require("path");

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions;

  return new Promise((resolve, reject) => {
    const productTemplate = path.resolve(`./src/templates/product.js`);
    resolve(
      graphql(
        `
          {
            allMercadoLibreProduct {
              edges {
                node {
                  id
                }
              }
            }
          }
        `
      )
        .then(result => {
          if (result.errors) {
            reject(result.errors);
          }
          result.data.allMercadoLibreProduct.edges.forEach(({ node }) => {
            const path = `/producto/${node.id}`;
            createPage({
              path,
              component: productTemplate,
              context: {
                id: node.id
              }
            });
          });
        })
        .catch(err => console.log("Error creating product pages ", err))
    );
  });
};

2 - Consume product data from the template:

In src/templates/product.js use this query:

export const productQuery = graphql`
  query Producto($id: String!) {
    mercadoLibreProduct(id: { eq: $id }) {
      id
      title
      price
      video_id
      permalink
      itemDescription
      accepts_mercadopago
      available_quantity
      itemImages {
        image {
          childImageSharp {
            fluid(maxWidth: 600, maxHeight: 250) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`

---

Other GraphQL Queries

Get all Products

allMercadoLibreProduct {
  edges {
    node {
      id
      title
      fields {
        slug
      }
      domain_id
      price
      currency_id
      itemThumbnail {
        image {
          childImageSharp {
            fluid(maxWidth: 400, maxHeight: 250) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
}

Get product by MercadoLibre ID

Note that the id field is a GraphQL internal ID. The ML ID is stored under itemID

Example: https://articulo.mercadolibre.com.ar/MLA-736407313-smart-tv-55-full-hd-samsung-un55k5500-_JM would be queried as:

{
  allMercadoLibreProduct(filter: { itemID: { eq: "MLA736407313" } }) {
    edges {
      node {
        title
      }
    }
  }
}

Get products by Category

{
  allMercadoLibreProduct(filter: { domain_id: { eq: "MLA-TELEVISIONS" } }) {
    edges {
      node {
        title
      }
    }
  }
}

Gatsby Theme

We launched a gatsby theme that uses this plugin.

gatsby-source-mercadolibre's Issues

No me genera nodos, plugin recién instalado

cuando ejecuto gatsby develop me da el siguiente error

warn There was a problem with gatsby-source-mercadolibre. Check this endpoint: ↳ https://api.mercadolibre.com/sites/MLA/search?nickname=FRAVEGA
TypeError: Cannot read property 'length' of undefined
at C:\Users\Luis\Desktop\agencia\mercadoback\node_modules\gatsby-source-mercadolibre\gatsby-node.js:59:66
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async Promise.all (index 20)
at runAPI (C:\Users\Luis\Desktop\agencia\mercadoback\node_modules\gatsby\src\utils\api-runner-node.js:485:16)
warn The gatsby-source-mercadolibre plugin has generated no Gatsby nodes. Do you need it?

me dice que hay un problema con el endpoint que genera gatsby node, y que no genera nodos, entonces cuando lo busco en http://localhost:8000/___graphql no me arroja resultados

y tambien dice que los problemas pueden estar en las lineas 59 y 97 del plugin

yo revise el endpoint
https://api.mercadolibre.com/sites/MLA/search?nickname=FRAVEGA
y entrega bien la respuesta, con su "paging" "total", no se que puede estar fallando la verdad

en mi gatsby config
...
{
resolve: gatsby-source-mercadolibre,
options: {
site_id: MLA,
username: FRAVEGA
}
},
....

no he hecho nada mas, estaba recien probando el plugin y me arrojó eso, aparte, probe eliminando la cache y todo.