NextJS 9 / 阿波罗路由
我是 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回答
-
繁花如伊
你需要传递身份证。我在下面重构了您的帖子内容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属性，所以不能在组件内部使用
随时随地看视频慕课网APP
相关分类
JavaScript