Next.js Apollo GraphQL加载查询

我正在使用Apollo GraphQL获取帖子以填充下一个js项目

我目前拥有的代码可以工作，但我希望实现useQuery的加载状态，而不是下面的代码

这是索引（如果愿意的话，发布页面）

从“./组件/布局”导入布局；
从“./components/Post”导入Post；
从“/./组件/客户端”导入客户端；
从“graphql标签”导入gql；
const POSTS_QUERY=gql`
质疑{
职位{
节点{
标题
鼻涕虫
张贴
特征图像{
源URL
}
}
}
}
`;
常量索引=道具=>{
const{posts}=props；
返回(
{posts.length
？posts.map（post=>）
: ""}
);
};
Index.getInitialProps=async（）=>{
const result=wait client.query（{query:POSTS\u query}）；
返回{
posts:result.data.posts.nodes
};
};
出口违约指数；

然后它获取一个单独的帖子

    import Layout from "../components/Layout";
import { withRouter } from "next/router";
import client from "../components/ApolloClient";

import POST_BY_ID_QUERY from "../queries/post-by-id";

const Post = withRouter(props => {
  const { post } = props;

  return (
    <Layout>
      {post ? (
        <div className="container">
          <div className="post">
            <div className="media">
              <img src={post.featuredImage.sourceUrl} alt={post.title} />
            </div>
            <h2>{post.title}</h2>
          </div>
        </div>
      ) : (
        ""
      )}
    </Layout>
  );
});

Post.getInitialProps = async function(context) {
  let {
    query: { slug }
  } = context;
  const id = slug ? parseInt(slug.split("-").pop()) : context.query.id;
  const res = await client.query({
    query: POST_BY_ID_QUERY,
    variables: { id }
  });

  return {
    post: res.data.post
  };
};

export default Post;

从“./组件/布局”导入布局；
从“下一个/路由器”导入{withRouter}；
从“./组件/客户端”导入客户端；
从“./查询/按ID发布”导入按ID发布的查询；
const Post=withRouter（props=>{
const{post}=props；
返回(
{邮局(
{post.title}
) : (
""
)}
);
});
Post.getInitialProps=异步函数（上下文）{
让{
查询：{slug}
}=上下文；
const id=slug？parseInt（slug.split（“-”.pop（））：context.query.id；
const res=wait client.query({
查询：按ID发布查询，
变量：{id}
});
返回{
post:res.data.post
};
};
导出默认帖子；

---

每当我尝试将useQuery与“@apollo/react hooks”一起使用时，我总是得到一个data.posts.map不是一个函数。

当您使用

useQuery

时，您不应该像

result.data.posts.nodes那样分解数据，因为数据字段将
未定义
，并且
加载
在第一次调用时为true。这就是为什么出现错误
data.posts.map不是函数的原因。然后，如果查询成功获取数据，
加载
字段将为false

你可以试试：


从“./组件/布局”导入布局；
从“./components/Post”导入Post；
从“/./组件/客户端”导入客户端；
从“@apollo/react hooks”导入{useQuery}
从“graphql标签”导入gql；
const POSTS_QUERY=gql`
质疑{
职位{
节点{
标题
鼻涕虫
张贴
特征图像{
源URL
}
}
}
}
`;
常量索引=道具=>{
const{posts}=props；
const{loading，error，data}=useQuery（POSTS\u QUERY）；
如果（加载）返回加载。。。
if（error）返回错误
返回(
{data.posts.nodes.length
？data.posts.nodes.map（post=>）
: ""}
);
};
当您使用
useQuery
时，您不应该像
result.data.posts.nodes
那样分解数据，因为数据字段将
未定义
，并且
加载
在第一次调用时为true。这就是为什么出现错误
data.posts.map不是函数的原因。然后，如果查询成功获取数据，
加载
字段将为false

你可以试试：


从“./组件/布局”导入布局；
从“./components/Post”导入Post；
从“/./组件/客户端”导入客户端；
从“@apollo/react hooks”导入{useQuery}
从“graphql标签”导入gql；
const POSTS_QUERY=gql`
质疑{
职位{
节点{
标题
鼻涕虫
张贴
特征图像{
源URL
}
}
}
}
`;
常量索引=道具=>{
const{posts}=props；
const{loading，error，data}=useQuery（POSTS\u QUERY）；
如果（加载）返回加载。。。
if（error）返回错误
返回(
{data.posts.nodes.length
？data.posts.nodes.map（post=>）
: ""}
);
};我已经修改了我的答案，我不知道如何解析单个帖子页面。@HeyImArt您可以用同样的方法处理获取单个帖子页面的数据。因此，我移动这些变量，而不是初始值，并将加载、错误和数据传递给新的useQuery，返回帖子？@HeyImArt您可以在组件内部使用
useQuery
，并将
postID
作为变量传递，以获取帖子数据。对不起，Michael，我对这一切还是新手，我无法让它工作。我尝试将其移动到组件中，然后将该组件调用到中的页面中，但现在它没有呈现任何内容。我已修改了答案，我不确定如何解析单个帖子页面。@HeyImArt您可以使用相同的方法来处理单个帖子页面的获取数据。因此，不使用initialprops，我移动这些变量并将加载、错误和数据传递到新的useQuery，返回帖子？@HeyImArt您可以在组件内部使用
useQuery
，并将
postID
作为其变量来获取帖子数据。抱歉，Michael，我对这一切还是新手，我无法让它工作。我尝试将其移动到组件中，然后将该组件调用到中的页面中，但现在它什么也没有呈现。
    import Layout from "../components/Layout";
import { withRouter } from "next/router";
import client from "../components/ApolloClient";

import POST_BY_ID_QUERY from "../queries/post-by-id";

const Post = withRouter(props => {
  const { post } = props;

  return (
    <Layout>
      {post ? (
        <div className="container">
          <div className="post">
            <div className="media">
              <img src={post.featuredImage.sourceUrl} alt={post.title} />
            </div>
            <h2>{post.title}</h2>
          </div>
        </div>
      ) : (
        ""
      )}
    </Layout>
  );
});

Post.getInitialProps = async function(context) {
  let {
    query: { slug }
  } = context;
  const id = slug ? parseInt(slug.split("-").pop()) : context.query.id;
  const res = await client.query({
    query: POST_BY_ID_QUERY,
    variables: { id }
  });

  return {
    post: res.data.post
  };
};

export default Post;