如何使用RelayJS获得下一个JS动态路由

Question

我正在尝试将路由切换到NextJS的v9 dynamic routing，而不是以前的next-routes库。

通过玩转并查看文档，如果我要传递参数/段，似乎会强制执行某种文件结构。例如对于博客文章

blog
  [slug].tsx

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

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

任何人都设法使它们协同工作吗？

Answer 1

例如[with-relay-modern]中的withData.js

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 || {})