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.
From the root of your Gatsby site:
npm install gatsby-source-mercadolibremodule.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.
This is an example of how you can automatically generate product 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))
);
});
};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
}
}
}
}
}
}
`allMercadoLibreProduct {
edges {
node {
id
title
fields {
slug
}
domain_id
price
currency_id
itemThumbnail {
image {
childImageSharp {
fluid(maxWidth: 400, maxHeight: 250) {
...GatsbyImageSharpFluid
}
}
}
}
}
}
}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
}
}
}
}{
allMercadoLibreProduct(filter: { domain_id: { eq: "MLA-TELEVISIONS" } }) {
edges {
node {
title
}
}
}
}We launched a gatsby theme that uses this plugin.