gatsby-source-mercadolibre v1.0.16

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

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.