如何让下一个JS动态路由与RelayJS协同工作

Question

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

从尝试和查看文档可以看出，如果我传入一个参数/slug，似乎会强制执行特定的文件结构。例如，用于博客文章

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