Problem using conditional fragments since v2+3 upgrade

[FINDarkside]

I'm unable to use conditional fragments where the fragment arguments come from url. This happened after updating from v1->v3 and I'm not quite sure how to fix this.

Here's a repro: https://github.com/FINDarkside/relay-nextjs-99-repro/blob/main/src/pages/relay-test.tsx Here's the same thing in v1 where everything works: https://github.com/FINDarkside/relay-nextjs-99-repro/blob/v1/src/pages/relay-test.tsx

You can see that if you click the button you'll get this error: Invariant Violation: Relay: Expected to receive an object where `...AFragment` was spread, but the fragment reference was not found

[rrdelaney]

Hey @FINDarkside! Looks like the router and query vars are getting out of sync somehow. I recommend using the query variables for the source of truth, accessed from preloadedQuery.variables. I cloned your example and changed the following:

const isBEnabled = preloadedQuery.variables.includeB;

and that seemed to fix the issue!

[FINDarkside]

Wow, I actually didn't even know we can access the variables and that they're also fully typed. That's going to come handy especially outside of this usecase. It also fixed the issue, big thanks for the help!

Regarding why this started breaking after update, I assume it means that previously after param change the page suspended immediately on the render, but doesn't do that anymore. It also means we now have to manually pass these variables down and render skeletons if the variable is false even though the component should be rendered. Previously we just relied on wrapping these components into Suspense and everything worked.

This isn't a blocker for me anymore thanks to your suggestion, but do you think I should keep this issue open or is this more like a feature than a bug?