如何在graphQL查询中添加变量？

pikk 发表于 Dev

皮克

我正在使用盖茨比。我需要将每个onCLick的限制增加3个。我试图按照这篇文章进行操作，但是没有成功，因此我删除了修改，这是原始代码...

这将帮助我加载更多帖子。

export const LatestNews = ({data}) => {
console.log(data);

  return (
    <section id="news_posts_section">
<p>some data</p>
    </section>
  );
};

export const latestNewsQuery = graphql`
query myquery{
  allMarkdownRemark(
    filter: { frontmatter: { layout: { eq: "news" } } }
    sort: { fields: frontmatter___date, order: DESC }
    limit: 2
  ) {
    nodes {
      frontmatter {
        layout
        title
        path
        date
        featuredImage
        thumbnail
      }
      excerpt(pruneLength: 325)
    }
  }
}
`;

这是我的gatsby节点：

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

  const blogPostTemplate = path.resolve('src/templates/blog-post/BlogPost.js');
  const newsTemplate = path.resolve('src/templates/news-single/NewsSingle.js');
  const latestNewsPage = path.resolve(
    'src/components/pages-implementation/news/sections/LatestNews.js',
  );

  const blog = graphql(`
    {
      blog: allMarkdownRemark(
        filter: { frontmatter: { layout: { eq: "blog" } } }
      ) {
        edges {
          node {
            frontmatter {
              path
            }
          }
        }
      }
    }
  `).then((result) => {
    if (result.errors) {
      result.errors.forEach((e) => console.error(e.toString()));
      return Promise.reject(result.errors);
    }
    const posts = result.data.blog.edges;

    posts.forEach((edge) => {
      const { path } = edge.node.frontmatter;
      createPage({
        path: path,
        component: blogPostTemplate,
        context: {},
      });
    });
  });

  const news = graphql(`
    {
      news: allMarkdownRemark(
        filter: { frontmatter: { layout: { eq: "news" } } }
      ) {
        edges {
          node {
            frontmatter {
              path
            }
          }
        }
      }
    }
  `).then((result) => {
    if (result.errors) {
      result.errors.forEach((e) => console.error(e.toString()));
      return Promise.reject(result.errors);
    }
    const news = result.data.news.edges;

    news.forEach((edge) => {
      const { path } = edge.node.frontmatter;
      createPage({
        path: path,
        component: newsTemplate,
        context: {},
      });
    });

    
    news.forEach(edge => {
      createPage({
        path: `/news/`,
        component: latestNewsPage,
        context: {
          // This time the entire product is passed down as context
          product: edge
        }
      });
    });


  });

  return Promise.all([blog, news]);
};

编辑11月21日：

我尝试使用非静态查询替换了上面的代码
我添加了gatsby-node配置
我在这里给出一些解释：BlogPost.js和NewsSingle.js是为每个帖子或新闻帖子创建新页面的模板（来自Netlify CMS）
LatestNews.js是页面中的组件。这是新闻的主页。所有新闻都显示在哪里？使用静态查询，它可以正常工作，但是，我需要将“ limit”变量设置为一个变量，以便应用更多加载按钮，即onClick将增加该限制，从而在循环中显示更多新闻。

通过以上配置，它说：

warning The GraphQL query in the non-page component "/home/user/projectname/src/components/pages-implementation/news/sections/LatestNews.js" will not be run.
Exported queries are only executed for Page components. It's possible you're
trying to create pages in your gatsby-node.js and that's failing for some
reason.

费兰·布埃鲁

useStaticQuery（因此名称）不允许接收变量。如果您看一下docs：

useStaticQuery 不接受变量（因此名称为“ static”），但可以在任何组件（包括页面）中使用

在GraphQL查询中传递变量的唯一方法是使用中的上下文API gatsby-node.js。例如：

  queryResults.data.allProducts.nodes.forEach(node => {
    createPage({
      path: `/products/${node.id}`,
      component: productTemplate,
      context: {
        // This time the entire product is passed down as context
        product: node
      }
    });
  });
};

在上面的代码段product中，在整个节点的上下文中将是一个变量。可以pageContext prop在目标模板中通过访问它或将其用作查询参数。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。