Javascript NextJS 9/Apollo路由_Javascript_Reactjs_Graphql_Next.js_React Apollo

Javascript NextJS 9/Apollo路由

javascript reactjs graphql next.js

Javascript NextJS 9/Apollo路由,javascript,reactjs,graphql,next.js,react-apollo,Javascript,Reactjs,Graphql,Next.js,React Apollo,我不熟悉Next.JS和Apollo，一直在使用它们创建个人网站我遇到了页面之间的路由问题，或者将正确的ID从主页和主博客页面传递到实际的帖子，以查询和呈现所有内容我在两个页面上使用了类似的查询；主页上的区别在于它减去了主要的帖子内容给定我传递的查询参数（标题），NextJS可以正确地路由到页面，但是我无法呈现其余的内容——因为另一个页面查询没有用于调用的ID 我应该如何结合Next.JS路由和Apollo来正确地在这两个地方之间传递数据任何解释这一点的帮助都将不胜感激；我想知道这是怎么

我不熟悉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 getArticles=gql`
{
物品（限：3件）{
身份证件
封面{
身份证件
网址
}
标题
日期
节选
使用者{
名称
}
}
}
`;
常量文章=（）=>
{
const{data，error，load}=useQuery（getArticles）；
如果（装载）
{
返回；
}
如果（错误）
{
返回
错误！{Error.message}；
}
返回(
{data.articles.map（article=>(
) ) }
);
};
导出默认值（）=>；

以及实际的帖子内容

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

const getArticle=gql`
{
物品（id:id）{
身份证件
封面{
身份证件
网址
}
标题
更新地址
内容
使用者{
名称
}
标签
}
}
`;
const Post=（）=>
{
const{data，error，load}=useQuery（getArticle）；
如果（装载）
{
返回；
}
如果（错误）
{
返回
错误！{Error.message}；
}
返回(
);
};
导出默认值（）=>；

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

const getArticle=gql`
查询getArticle（$id:id！）{
物品（id:$id）{
身份证件
封面{
身份证件
网址
}
标题
更新地址
内容
使用者{
名称
}
标签
}
}
`;
const Post=（{articleId}）=>
{
const{data，error，load}=useQuery（getArticle，{variables:{id}）；
如果（装载）
{
返回；
}
如果（错误）
{
返回
错误！{Error.message}；
}
返回(
);
};
导出默认值（）=>