如何将变量添加到 graphQL 查询？

Posted 2023-03-08

【中文标题】如何将变量添加到 graphQL 查询？

【英文标题】：How to add variables to graphQL query?

【发布时间】：2021-03-04 01:15:00

【问题描述】：

我正在使用 Gatsby。 我需要为每个 onCLick 增加 3 的限制。 我尝试关注this post，但没有成功，所以我删除了编辑，这里是原始代码...

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

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 是页面中的一个组件。这是新闻的主页。所有新闻在哪里显示？使用静态查询，它可以正常工作，但是，我需要将“限制”设为变量以应用加载更多按钮，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 - 静态意味着...静态，不支持变量

【参考方案1】：

useStaticQuery（因此得名）不允许接收变量。如果你看看at the docs：

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

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

  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
      
    );
  );
;

在上面的sn-p中，会是一个product变量在上下文中的整个节点。可以通过目标模板中的pageContextprop访问，也可以作为查询参数使用。

【讨论】：

谢谢，我试着申请了。我用更多信息编辑了原始帖子。希望能帮到你

不可能实现你想要的。 gatsby-node.js（页面创建）在构建时静态发生，因此您可以通过单击添加动态变量。您应该更改设置以找到另一种解决方法。例如，检索所有帖子并在每次点击时 3 个 3 个显示它们，但不更改查询。

谢谢，让一切更清楚。所以也许像我之前做的那样是一个静态查询，没有限制。记住所有新闻并在点击时越来越多地显示它们？您认为这是一个合理的解决方案吗？

这取决于您的需求。如果您要为每个帖子创建动态页面，我强烈建议您使用gatsby-node.js 方法。如果没有，（使用 SPA 只显示所有帖子）我会推荐一个页面查询。如果检索大量数据，静态查询在性能方面的成本很高，并且它应该用于您希望在某些共享组件（页眉/页脚链接、元数据等）中重用的静态参数。

我成功了。我没有在组件中加载它，而是在“页面组件”中进行了相同的查询。在加载新闻的组件的 props 中发送data。将其更改为数组并进行记忆。然后 onClick 我通过splice 和钩子将数组更改为显示。效果很好！