Getting data Gatsby.js and contentful

Question

I have pages in contenful with different URLs. Now I'm getting all data from all pages, but I need to get different data for different URL. I'm tryin to filter it, but get error. So How I can check if url='something' I need query it ?

import React from "react";
import { StaticQuery, graphql } from "gatsby";
import ArticleMfo from "../components/articleMfo";

const Products = () => (
    <StaticQuery
        query={graphql`
            query MyQuery {
                allContentfulAllPages(filter: {link: {eq: $MYURL}}) {
                    edges {
                        node {
                            mfo {
                                __typename
                                ... on ContentfulBank {
                                    id
                                    text
                                    limit
                                    rate
                                    term
                                    link
                                    logo {
                                        title
                                        file {
                                            url
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        `}

    render={data =>  ( 
        <Container className="container">
            {data.allContentfulAllPages.edges.map(({ node }, i) => (
                <div>
                    {node.mfo.map(mfos => (
                        <ArticleMfo key={mfos.id} content={mfos} />
                    ))}
                </div>
            ))}
        </Container>
    )}
  />
);

export default Products

Answer 1

Static query (hence the name) does not accept variables. As you can see from the Static Query docs :

StaticQuery does not accept variables (hence the name “static”), but can be used in any component, including pages

If you want to filter it, you will need to use a page query and pass the variable name ( MYURL ) via context on each page. In that case, you'll need to move your query to gatsby-node.js and, on every page creation, pass the variable through context to make it available to use as a filter. Something like:

const path = require("path")

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

  const result = await graphql(
    `
      {
        allMarkdownRemark(limit: 1000) {
          edges {
            node {
              frontmatter {
                path
              }
            }
          }
        }
      }
    `
  )

  // Handle errors
  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`)
    return
  }


  const blogPostTemplate = path.resolve(`src/templates/blog-post.js`)
  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    const path = node.frontmatter.path
    createPage({
      path,
      component: blogPostTemplate,
      // In your blog post template's graphql query, you can use pagePath
      // as a GraphQL variable to query for data from the markdown file.
      context: {
        pagePath: path,
      },
    })
  })
}

Note: Replace the query above and the resolvers for your data.

With the snippet above, every page created from the GraphQL query will have the path available (as pagePath ) through context to filter, adapt it to your needs.