variables that differ from the variables used to fetch fragment

[andyfen]

i am trying to set the variables on a container from route params when i hardcode a value in it works (commented out line) but when i set it from the params i get the warning

app.js:9301 Warning: RelayContainer: component Inner was rendered with variables that differ from the variables used to fetch fragment viewer. The fragment was fetched with variables {"id":null}, but rendered with variables {"id":"1"}. This can indicate one of two possibilities:

• The parent set the correct variables in the query - Inner.getFragment('viewer', {...}) - but did not pass the same variables when rendering the component. Be sure to tell the component what variables to use by passing them as props: <Inner ... id={...} />.

    <Route
      path='/inner/:id'
      component={InnerContainer}
      queries={WidgetQuery}
      />

export default Relay.createContainer(Inner, {
  initialVariables: {
    id: null
  },

  prepareVariables({ id }) {
    return {
      id: id,
    // id: "1"
   };
  },

  fragments: {
    viewer: () => Relay.QL`
      fragment on User {
        widget(_id: $id) {
          id,
          name,
          src
        },
      }
    `,
  },
});

[taion]

Make sure you're not overriding the value you pass in. Otherwise, consult the TodoMVC example for a working, runnable example with the correct pattern for setting container variables from route parameters: https://github.com/taion/relay-todomvc.

[andyfen]

thanks. will close this,

[elado]

Had the same issue, I was missing passing the vars to the getFragment.
See #92 (comment)

[andyfen]

@elado that works, thanks

[LyndaOuni]

hello, i have the same problem with react relay, i need help please,
class ProductRoute extends Relay.Route { static routeName = 'BasketProductsRoute'; static queries = { product: queriesComponent => Relay.QL query {
node(id: $id) {
${queriesComponent.getFragment('product')}
}
}, }; }
const AddToBasketWarrantyContainer = Relay.createContainer(AddToBasketWarrantyPage, {
fragments: {
product: () => Relay.QLfragment on Product { id uuid logo ref ecoPart category { id } images { uris(size: [MEDIUM]) } brand ref name { text } discount ean promotionsList{ idPrmotion, seuilMinumumDeclenchement, numeroPromotion, typeSeuilDeclenchement, finOffre, valeurDeclencheur, cibleClient, cumulable, uniteRemise, remiseEnseigne, typeRemise, montantMaximumRemise, statut, financement, remiseFournisseur, debutOffre, typeDeclencheur, priceProd, priceProdDiscounted, discount, valuePromo } tvaList { SWListProd { idTva DUREEANNEE isSelected DUREE PVTTC TAUX DESIGNAT PRIXMAX SERVICETYPE GENCOD }, SPCWListProd { idTva, DESIGNAT, SERVICETYPE, COMMPREST, LBPREST, CDPREST, ADDITIONALINFO, isSelected }, SRTWListProd{ idTva, DESIGNAT, SERVICETYPE, isSelected, value } }, price { integralPart fractionalPart valueInCents } categoriesOfProduct { catLevel1, catLevel2, catLevel3 } basePrice { integralPart fractionalPart } codeRemu codeGLN categoriesOfProduct { catLevel1 catLevel2 catLevel3 } creditWithWarranty },
},
});

warning : relay Container: component ``Connect(Service Warrantywas rendered with variables that differ from the variables used to fetch fragmentproduct`. the fragment was fetched with varibales (`not fetched`), but rendered with variables `{}` .