CODEWITHSUNDEEP
relayjs
jbrown
jbrown

Reputation: 7986

RelayQL: Invalid fragment composition

I'm getting Invariant Violation: RelayQL: Invalid fragment composition, use `${Child.getFragment('name')}`. in the following. I've no idea why, and nothing seems to fix it. My component contains:

fragments: {
  album: () => Relay.QL`
    fragment on Album {
      ${AlbumMutation.getFragment('album')}
    }
  `,
},

AlbumMutation contains:

static fragments = {
  album: () => Relay.QL`
    fragment on Album {
      id
    }
  `,
}

Upvotes: 2

Views: 408

Answers (2)

OverclockedTim
OverclockedTim

Reputation: 1743

I was able to fix this in ES6 by removing my React/Relay imports from the component.

import React from 'react';
import Relay from 'react-relay';

class ...

Upvotes: 0

Austen
Austen

Reputation: 111

To anybody who runs into this, its probably due to the examples loading the React, Relay, and ReactDOM libs in the public/index.html file, instead of using the webpack import X from 'y';. If you are attempting to use the react-relay-router library, you have to use the latter, but having two copies of Relay will cause this error to occur.

I was able to fix this by removing the references in public/index.html, but its good to know that double-importing relay does seem to break this!

Upvotes: 2

Related Questions