gpt4 book ai didi

graphql - 如何向 graphQL 查询添加变量?

转载 作者:行者123 更新时间:2023-12-05 04:56:20 27 4
gpt4 key购买 nike

我正在使用 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(因此得名)不允许接收变量。如果你看看at the docs :

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

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

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

关于graphql - 如何向 graphQL 查询添加变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64932567/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com