Relay: [Modern:rc.2|3] createFragmentContainer does not allow variable as second argument

[guigrpa]

This works:

createFragmentContainer(Component, { /* ... */ });

But this doesn't:

const fragments = {
  /* ... */
};
createFragmentContainer(Component, fragments);

The Relay Compiler complains: FindGraphQLTags:createFragmentContainerexpects a second argument of fragment definitions..

In practice, this prevents the definition of fragments at the top of the file, which is where they arguably make more sense.

Not a major issue; keep up the good work!

[leebyron]

Unfortunately this is a known issue - the babel plugin looks for fragments in a particular place.

Could you try not using the wrapping {}?

ie.

const fragments = graphql`
  ...
`;

createFragmentContainer(Component, fragments)

I'm curious if this works out of the box

[guigrpa]

@leebyron Nope, same issue. It also doesn't identify the file causing the problem, btw:

Error: FindGraphQLTags: `createFragmentContainer` expects a second argument of fragment defi
nitions.
    at invariant (D:\Prog\mady\node_modules\relay-compiler\bin\relay-compiler:4714:12)
    at CallExpression (D:\Prog\mady\node_modules\relay-compiler\bin\relay-compiler:4583:82)
    at visit (D:\Prog\mady\node_modules\relay-compiler\bin\relay-compiler:4721:6)
    at traverse (D:\Prog\mady\node_modules\relay-compiler\bin\relay-compiler:4734:8)
    at visit (D:\Prog\mady\node_modules\relay-compiler\bin\relay-compiler:4724:4)
    at D:\Prog\mady\node_modules\relay-compiler\bin\relay-compiler:4738:12
    at Array.forEach (native)
    at traverse (D:\Prog\mady\node_modules\relay-compiler\bin\relay-compiler:4736:13)
    at visit (D:\Prog\mady\node_modules\relay-compiler\bin\relay-compiler:4724:4)
    at D:\Prog\mady\node_modules\relay-compiler\bin\relay-compiler:4738:12

[seanchas]

@guigrpa you can try this:

import Relay, { graphql } from 'react-relay'

const fragment = graphql`...`

...

Relay.createFragmentContainer(Component, fragment)

[guigrpa]

@seanchas It worked! Thanks a lot for the workaround

[maikelrobier]

Could someone explain why this doesn't work:

const fragments = {
  /* ... */
};
createFragmentContainer(Component, fragments);

and this does:

import Relay, { graphql } from 'react-relay'

const fragment = graphql`...`

...

Relay.createFragmentContainer(Component, fragment)

@seanchas ?

This won't allow to create a HOC around createFragmentContainer. Is that a bug, or there is a special reason for this relay-compiler behavior ?

[maikelrobier]

I think this is related: https://github.com/facebook/relay/issues/1790

[CoericK]

Could someone explain why this doesn't work:

const fragments = {
  /* ... */
};
createFragmentContainer(Component, fragments);

and this does:

import Relay, { graphql } from 'react-relay'

const fragment = graphql`...`

...

Relay.createFragmentContainer(Component, fragment)

@seanchas ?

This won't allow to create a HOC around createFragmentContainer. Is that a bug, or there is a special reason for this relay-compiler behavior ?

Is this working? Im facing the same issue and creating the variable

const fragment = graphql`fragment ......` then createFragmentContainer(MyComponent, fragment) 

still triggers the parse error

[simkessy]

Was this ever fixed?