Relay: RelayMutation getFragment method is static ?

[chandu0101]

looks like inheriting static members doesn't work in all browsers ? recently we(sclala.js devs) faced similar issue when upgrading to react 0.14 rc
https://github.com/scala-js/scala-js/issues/1900
https://github.com/facebook/react/issues/4836

react team reconsidering this change!, is relay team also working along same guidelines ? if not can we get an API Relay.createMutation(options) similar to Relay.createContainer ?

[wincent]

Thanks for he heads up, @chandu0101. @voideanvalue might have thoughts on this, as he did most of the implementation for the current version of the RelayMutation API.

[kassens]

An alternative to a custom class creator would be to try to avoid using inherited static properties. A possible API could be:

// current
MyComponent.getFragment();
// alternative
Relay.getFragment(MyComponent);

[03eltond]

I'm also seeing this behavior in IE <= 10. The static method getFragment from RelayMutation does not get added to inherited components, which causes this:

MyComponent.getFragment('user')

to result in:

Object doesn't support property or method 'getFragment'

I'm currently able to work around this problem by calling getFragment on RelayMutation directly:

Relay.Mutation.getFragment.call(MyComponent, 'user')

But this is less than ideal. I believe this is actually a Babel limitation in converting ES6 classes to IE <= 10 (static properties specifically don't seem to work), so I'm unsure at the moment what the best fix is.

[gauravtiwari]

@03eltond You could use https://babeljs.io/docs/plugins/transform-class-properties/ and https://www.npmjs.com/package/babel-plugin-transform-es2015-classes

[03eltond]

Thanks @gauravtiwari, I'd tried this already but with no luck. I think the problem is that the relay package has already been run through Babel by the time you get it via npm (as it should be), and so those plugins never have a chance to do their thing to RelayMutation.js. Those plugins would actually need to be used by relay's own build process in order for this to work.

It's been several months since I messed with this, so please let me know if you took this approach and it worked for you. I should probably try using those plugins on a clone of relay to verify my own theory on the problem.

[gauravtiwari]

@03eltond I see. No, it works for me with those plugins. I actually installed a couple, especially the transform ones. Yeah, give it a shot and it should work now 👍

[wincent]

Thanks for the input, everybody. I'm going to close this given @gauravtiwari's workaround, and also because the mutation API is changing dramatically for the better in Relay 2, so this problem should simply go away in the near future.

Thanks once again!

[jaden-chen]

@gauravtiwari I'm running into the same issue with IE10,
Object doesn't support property or method 'getFragment'

and I still cannot get it to work by using the 2 babel plugins that you mentioned, https://babeljs.io/docs/plugins/transform-class-properties/ and https://www.npmjs.com/package/babel-plugin-transform-es2015-classes

Are you sure that it's working in IE10? Could you or someone provide more help?

[svrcekmichal]

I fixed it myself with following code on Mutation class

  // IE <= 10 workaround URL: https://github.com/facebook/relay/issues/1444
  static getFragment(name) {
    return Relay.Mutation.getFragment.call(MeetingVoteMutation, name);
  }

I found it better, because I don't need to handle it outside of Mutation and I need to write it only once for every mutation :)

Example:

import Relay from 'react-relay';

export default class MeetingVoteMutation extends Relay.Mutation {

  static fragments = {
    opponent: () => Relay.QL`
      fragment on User {
        id
      }
    `,
    viewer: () => Relay.QL`
      fragment on Viewer {
        id
      }
    `,
  }

  // IE <= 10 workaround URL: https://github.com/facebook/relay/issues/1444
  static getFragment(name) {
    return Relay.Mutation.getFragment.call(MeetingVoteMutation, name);
  }

  getMutation() {
    //...
  }

  getVariables() {
    //...
  }

  getFatQuery() {
    //...
  }

  getOptimisticResponse() {
    //...

  getConfigs() {
    //...
  }
}