我是 Next.JS 和 Apollo 的新手，一直在使用它们来创建个人网站。我遇到了页面之间路由的问题 - 或者将正确的 ID 从主页和主博客页面传递到实际帖子以查询和呈现所有内容。我在两个页面上都使用了类似的查询；主页上的区别在于它减去了主要的帖子内容。NextJS 正确地路由到给定我传递的查询参数（标题）的页面，但我无法呈现其余内容——因为其他页面查询没有用于调用的 ID。我应该如何结合 Next.JS 路由和 Apollo 在两个地方之间正确传递数据？任何帮助解释这一点将不胜感激；我想知道它是如何完成的，这样我以后就可以自己解决这个问题。这是主页组件的代码：const getArticles = gql` { articles(limit: 3) { id coverImg { id url } title date excerpt user{ name } } }`;const Articles = () =>{ const { data, error, loading } = useQuery( getArticles ); if ( loading ) { return <Load />; } if ( error ) { return <div> <Err/> Error! { error.message }</div>; } return ( <div className={ s.recentArticles }> { data.articles.map( article => ( <Post type='post' key={ article.id } coverImg={ article.coverImg.url } title={ article.title } date={ article.date } name={ article.user.name } excerpt={ article.excerpt } /> ) ) } </div> );};export default () => <Articles />;
1 回答
繁花如伊
TA贡献2012条经验 获得超12个赞
你需要传递身份证。我在下面重构了您的帖子内容
const getArticle = gql`
query getArticle($id: ID!) {
article (id: $id) {
id
coverImg {
id
url
}
title
updated_at
content
user{
name
}
tags
}
}
`;
const Post = ({articleId}) =>
{
const { data, error, loading } = useQuery( getArticle, { variables: { id } } );
if ( loading )
{
return <Load/>;
}
if ( error )
{
return <div>
<Err/>
Error! { error.message }</div>;
}
return (
<main className={s.post}>
<Nav />
<CoverImg title={data.article.title} url={data.article.coverImg.url}/>
<Tags />
<Body content={data.article.content}/>
<Sidebar />
<Footer />
</main>
);
};
export default () => <Post />;
注意id 属性和查询名称前面的美元符号。
query getArticle($id: ID!) {
article (id: $id) {
还要注意变量选项
useQuery(getArticle, { variables: { id: articleId } });
还要注意articleId正在使用的道具。为此，您需要更改文章列表组件，如下所示：
<Post
type='post'
key={ article.id }
articleId={ article.id }
coverImg={ article.coverImg.url }
title={ article.title
date={ article.date }
name={ article.user.name }
excerpt={ article.excerpt }
/>
注意：React 不通过key属性，所以不能在组件内部使用
添加回答
举报
0/150
提交
取消