CODEWITHSUNDEEP
routesnext.jsrelayjs
MDalt
MDalt

Reputation: 1801

How to get Next JS dynamic routing working with RelayJS

I am trying to switch our routing to NextJS's v9 dynamic routing, moving off the previous next-routes library.

From playing around and looking at the docs, it seems to enforce a certain file structure if I was to pass in a parameter/slug. e.g. for a blog post

blog
  [slug].tsx

Would allow me to use a route like blog/id123.

We use RelayJS, which also has a reliance on the file name. In this case, all React components must name queries in the format FileNameQuery. This would mean I'd need to name all my Relay queries after the variable name I am passing in, which isn't going to scale well.

Has anyone managed to get these working well together?

Upvotes: 1

Views: 449

Answers (1)

Ng Thong
Ng Thong

Reputation: 104

withData.js in example 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 || {})

Upvotes: 1

Related Questions