Relay 0.5.0 invariant expects query to be empty, 0.4.0 worked fine

[LegNeato]

Getting this error with Relay 0.5.0:

Uncaught Invariant Violation: Relay.QL: Expected query `onboarding_data` to be empty. For example, use `node(id: $id)`, not `node(id: $id) { ... }`.

Everything worked fine with 0.4.0. I have the latest GraphQL and React.

Not sure what info you need to debug or if the issue is on my side and 0.4.0 is more tolerant...let me know what you need.

[josephsavona]

@LegNeato can you paste your route definition?

[LegNeato]

I'm using react-router and react-router-relay so there is likely magic going on under the hood I am not aware of. This is how I have it configured anyway, not sure it helps...

const OnboardingDataQueries = {
  onboarding_data: (Component) => Relay.QL`
    query {
      onboarding_data {
        ${Component.getFragment('onboarding_data')},
      },
    }
  `,
};

<Route path="/account/setup/type" component={AccountTypeOnboardingPage} queries={OnboardingDataQueries} />

...
  static fragments = {
    onboarding_data: () => Relay.QL`
      fragment on OnboardingData {
        id,
        accountType,
      }
    `,
  };
}

export default Relay.createContainer(AccountTypeOnboardingPage, {
  fragments: {
    onboarding_data: () => Relay.QL`
      fragment on OnboardingData {
        id,
        accountType,
        ${AccountTypeOnboardingMutation.getFragment('onboarding_data')},
      }
    `,
  },
});

[josephsavona]

@LegNeato what browser are you using? Relay checks the function length to see whether it takes arguments - your query definition ((Component) => Relay.QL...``) takes an argument, but the fn.length check seems to be returning 0 instead of 1.

[kassens]

Could you paste what the code looks like transformed? Maybe it's the way the arrow function is transformed in your pipeline that breaks this detection?

[LegNeato]

@josephsavona latest Chrome. Attached is a (crappy) screenshot with values from the debugger.

[josephsavona]

From the screenshot, it appears that queryBuilder is a function with zero arguments. Can you paste the transformed code for your route?

[kassens]

The call to isDeprecatedCallWithArgCountGreaterThan(queryBuilder, 0) is supposed to return false since your queryBuilder has 1 argument. queryBuilder is the arrow function defined here in your code:

const OnboardingDataQueries = {
  onboarding_data: (Component) => Relay.QL`...`
}

...and it has 1 argument. How does the arrow function look like transformed?

[LegNeato]

var OnboardingDataQueries = {
  onboarding_data: function onboarding_data(Component) {
    return (function (sub_0) {
      return {
        children: [{
          fieldName: 'id',
          kind: 'Field',
          metadata: {
            parentType: 'OnboardingData',
            isGenerated: true,
            isRequisite: true
          }
        }, _reactRelay2['default'].QL.__frag(sub_0)],
        fieldName: 'onboarding_data',
        kind: 'Query',
        metadata: {},
        name: 'App'
      };
    })(Component.getFragment('onboarding_data'));
  }
};

FWIW I'm using pretty standard babel (5, not 6) and webpack AFAIK. But I am a JS n00b :-D.

[LegNeato]

[LegNeato]

children here has 2 elements, and one is not a Field (it is a RelayFragmentReference) which appears to make the children.every() fail.

[josephsavona]

This looks like a problem with react-router-relay - the function onboarding_data is being wrapped as

function() {
  return query(component, routeParams);
}

[LegNeato]

Cool, do you want me to close this out or is it a behavior/expectation change that needs to be reverted in relay?

[taion]

I think I just need to update this on my side.

[taion]

Although I am curious what changed.

[josephsavona]

This is expected behavior for Relay; react-relay-router shouldn't wrap the query builder ((Component) => Relay.QL). The change in Relay was to remove support for a deprecated form of query builders that accepted 3 arguments (not used in open source).

[josephsavona]

@taion We previously allowed argument-less query builders to have fragments, but this doesn't make sense. The stricter check is here: c9baf7f#commitcomment-14343423

[taion]

Thanks! I'm going to roll this fix on my side into part of a broader fix now that I have some new APIs available on the React Router side as well. Should have this fixed soon.

[kassens]

@LegNeato for your case the shorthand version might fix your immediate issue (at least for this case):

const OnboardingDataQueries = {
  onboarding_data: () => Relay.QL`
    query {
      onboarding_data
    }
  `,
};

[josephsavona]

Sounds good, i'll close this out but feel free to continue the discussion here.