如何让 Next JS 动态路由与 RelayJS 一起使用

Posted 2023-03-08

【中文标题】如何让 Next JS 动态路由与 RelayJS 一起使用

【英文标题】：How to get Next JS dynamic routing working with RelayJS

【发布时间】：2020-05-06 20:48:06

【问题描述】：

我正在尝试将我们的路由切换到 NextJS 的 v9 dynamic routing，移出之前的 next-routes 库。

从玩弄和查看文档来看，如果我要传入参数/slug，它似乎会强制执行某种文件结构。例如博客文章

blog
  [slug].tsx

允许我使用blog/id123 之类的路由。

我们使用 RelayJS，它也依赖于文件名。在这种情况下，所有 React 组件都必须以 FileNameQuery 的格式命名查询。这意味着我需要在我传入的变量名之后命名我的所有中继查询，这不会很好地扩展。

有没有人设法让它们一起工作得很好？

【参考方案1】：

withData.js 在示例中with-relay-modern

if (options.query) 
  // Provide the `url` prop data in case a graphql query uses it
  // const url =  query: ctx.query, pathname: ctx.pathname 
  const variables = ctx.query
    ? Object.assign((options.variables || ), ctx.query)
    : (options.variables || )
  // const variables = options.variables ||  
  // const cacheConfig =  force: true 
  // TODO: Consider RelayQueryResponseCache
  // https://github.com/facebook/relay/issues/1687#issuecomment-302931855
  queryProps = await fetchQuery(environment, options.query, variables) // , cacheConfig
  queryRecords = environment
    .getStore()
    .getSource()
    .toJSON()

const variables = ctx.query ? Object.assign((options.variables || ), ctx.query) : (options.variables || )