CODEWITHSUNDEEP
reactjsgraphqlrelayjsgraphql-jsreact-router-relay
Rohit Ravikoti
Rohit Ravikoti

Reputation: 21

Relay generating invalid query after using `setVariables`-- am I doing something wrong?

For some reason, if I generate a root query which takes in parameters before injecting the child component, like so:

import Relay from 'react-relay';

export default {
  production: (Component) => Relay.QL`
    query {
      getProduction(id: $productionId) {
        ${Component.getFragment('production')}
      }
    }
  `
};

Relay originally generates this query:

query MyProductionDetailsQuery($id_0:ID!,$where_1:ProductionRoleWhereArgs!) {
  getProduction(id:$id_0) {
    id,
    ...F0
  }
}
fragment F0 on Production {
  id,
  ...
  _roles4oPiwv:roles(first:10,where:$where_1) {
    edges {
      node {
        id,
        ...
      },
      cursor
    },
    pageInfo {
      hasNextPage,
      hasPreviousPage
    }
  }
}

variables:

{id_0: "UHJvZHVjdGlvbjoxNg==", where_1: {archived: {eq: true}}}

However, If the Component's relay container has variables of its own, running this.props.relay.setVariables({...variables}) completely changes the request query generated by relay into something like this:

query My_production_details_page_ProductionRelayQL($id_0:ID!,$where_1:ProductionRoleWhereArgs!) {
  node(id:$id_0) {
    ...F0
  }
}
fragment F0 on Production {
  id,
  _roles6J5gK:roles(first:10,where:$where_1) {
    edges {
      node {
        id,
        ...
      },
      cursor
    },
    pageInfo {
      hasNextPage,
      hasPreviousPage
    }
  }
}

variables:

{id_0: "UHJvZHVjdGlvbjoxNg==", where_1: {archived: {eq: false}}}

However, setVariables works fine if I have a root query with no parameters:

import Relay from 'react-relay';

export default {
  viewer: (Component, variables) => Relay.QL`
    query {
      viewer {
        ${Component.getFragment('viewer', { ...variables })}
      }
    }
  `
};

Here's the generated query:

query ViewerQuery($where_0:ProductionWhereArgs!) {
  viewer {
    ...F0
  }
}
fragment F0 on Viewer {
  user {
    _productions2IPZAw:productions(first:10,where:$where_0) {
      edges {
        node {
          id,
          ...
        },
        cursor
      },
      pageInfo {
        hasNextPage,
        hasPreviousPage
      }
    },
    id
  }
}

variables:

{where_0: {expDate: {gt: "2016-11-04T16:29:11.677Z"}, archived: {eq: false}}}

After setVariables in the working setup:

query ViewerQuery($where_0:ProductionWhereArgs!) {
  viewer {
    ...F0
  }
}
fragment F0 on Viewer {
  user {
    _productions1CyNvL:productions(first:10,where:$where_0) {
      edges {
        node {
          id,
          ...
        },
        cursor
      },
      pageInfo {
        hasNextPage,
        hasPreviousPage
      }
    },
    id
  }
}

variables:

{where_0: {expDate: {lt: "2016-11-04T16:34:12.537Z"}, archived: {eq: false}}}

versions:

"react-relay": "^0.9.3",
"react-router-relay": "^0.13.5"

I'm not sure if I'm doing something wrong with the configuration, or if it's just a bug on Relay's end.

Does anyone know what might be causing this issue?

Upvotes: 1

Views: 63

Answers (1)

Viacheslav Sokolov
Viacheslav Sokolov

Reputation: 46

When you run setVariables it leads to refetching only necessary data. Relay looks which part of query could be affected by changing variable and requests from GraphQL server needed fragment. It is possible because of Node interface(i.e. fetching object by opaque Relay id). See more in documentation.

I think, in your case you should implement Node Interface for Production type on GraphQL server.

Upvotes: 0

Related Questions