NextJS 9 / Apollo 路由

Question

我是 Next.JS 和 Apollo 的新手，一直在使用它们创建个人网站。

我遇到页面间路由问题 - 或将正确的 ID 从主页和博客主页传递到实际 post 以查询和呈现所有内容。

我在两个页面上都使用了类似的查询；主页上的不同之处在于它减去主要 post 内容。

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

和实际Post内容

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。我已经重构了你下面的 post 内容

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

NextJS 9 / Apollo 路由

NextJS 9 / Apollo Routing

javascript

reactjs

graphql

next.js

react-apollo