时间戳

首页 > 解决方案 > 如何在 graphql-yoga 中实现干净的 Next.js URL

node.js - 如何在 graphql-yoga 中实现干净的 Next.js URL

问题描述

我正在创建一个使用 Next.js 进行服务器端渲染的 GraphQL 应用程序。您可能知道，有一种推荐的方法来使用 Express 实现干净的 URL。我正在尝试使用 graphql-yoga 来达到同样的效果，但它不起作用。

我已经尝试过server.express.get('/route', ...)，server.get('/route', ...)但没有任何效果。在他们提供的文档中，server.express.get(server.options.endpoint, handler())但它对我不起作用。

有没有人在 GraphQL Yoga 服务器中实现过干净的 Next.js URL，你是如何实现的？下面是我如何创建服务器。

function createServer() {
  return new GraphQLServer({
    typeDefs: "src/schema.graphql",
    resolvers: {
      Mutation,
      Query
    },
    context: req => ({ ...req, db })
  });
}


const server = createServer();

server.express.post('/product/name', (req,res,next) => {
  //this is where i want to implement next clean url
  //but it's not working
  console.log('Am never reached..');
  next();
})

标签： node.jsgraphqlnext.js

解决方案

使用新版本的 Next.js，创建干净的 URL 非常简单。

创建参数化页面（例如pages/post/[pid].js）：

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { pid } = router.query

  return <p>Post: {pid}</p>
}

export default Post

Next.js 文档中有关动态路由的更多信息。

然后，您可以链接到它并显示所需的 URL：

<Link href="/post/[pid]" as="/post/abc">
  <a>First Post</a>
</Link>

推荐阅读