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.