猿问

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


萧十郎
浏览 136回答 1
1回答

繁花如伊

你需要传递身份证。我在下面重构了您的帖子内容const getArticle = gql`&nbsp; &nbsp;query getArticle($id: ID!) {&nbsp; &nbsp; &nbsp; &nbsp; article (id: $id) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; coverImg {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; updated_at&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; user{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tags&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }`;const Post = ({articleId}) =>{&nbsp; &nbsp; const { data, error, loading } = useQuery( getArticle, { variables: { id } } );&nbsp; &nbsp; if ( loading )&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; return <Load/>;&nbsp; &nbsp; }&nbsp; &nbsp; if ( error )&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; return <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Err/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Error! { error.message }</div>;&nbsp; &nbsp; }&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <main className={s.post}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Nav />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <CoverImg title={data.article.title} url={data.article.coverImg.url}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Tags />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Body content={data.article.content}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Sidebar />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Footer />&nbsp; &nbsp; &nbsp; &nbsp; </main>&nbsp; &nbsp; );};export default () => <Post />;注意id 属性和查询名称前面的美元符号。&nbsp;query getArticle($id: ID!) {&nbsp; &nbsp; &nbsp; &nbsp; article (id: $id) {还要注意变量选项useQuery(getArticle, { variables: { id: articleId } });还要注意articleId正在使用的道具。为此，您需要更改文章列表组件，如下所示：&nbsp;<Post&nbsp; &nbsp; &nbsp; type='post'&nbsp; &nbsp; &nbsp; key={ article.id }&nbsp; &nbsp; &nbsp; articleId={ article.id }&nbsp; &nbsp; &nbsp; coverImg={ article.coverImg.url }&nbsp; &nbsp; &nbsp; title={ article.title&nbsp; &nbsp; &nbsp; date={ article.date }&nbsp; &nbsp; &nbsp; name={ article.user.name }&nbsp; &nbsp; &nbsp; excerpt={ article.excerpt }/>注意：React 不通过key属性，所以不能在组件内部使用
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答