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

【问题标题】：How to implement clean Next.js URL in graphql-yoga如何在 graphql-yoga 中实现干净的 Next.js URL
【发布时间】：2019-12-23 15:11:45
【问题描述】：

我正在创建一个使用 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.js graphql next.js

【解决方案1】：

使用新版本的 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 documentation regarding dynamic routes。

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

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

【讨论】：