NextJS 9 / 阿波罗路由答案

【问题标题】：NextJS 9 / Apollo RoutingNextJS 9 / 阿波罗路由
【发布时间】：2020-03-23 04:50:23
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs graphql next.js react-apollo

【解决方案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 属性和查询名称前面的 dollar 符号。

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

【讨论】：