Question

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

以及实际的帖子内容

const getArticle = gql`
    {
        article (id:id) {
            id
            coverImg {
                id
                url
            }
            title
            updated_at
            content
            user{
                name
            }
            tags
        }
    }
`;

const Post = () =>
{

    const { data, error, loading } = useQuery( getArticle );
    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 />;

Answer 1

您需要传递ID。我在下面重构了您的帖子内容

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属性，因此不能在组件内部使用

NextJS 9 /阿波罗路由

1 个答案: