React and relay error scrapbook

March 3, 2016

I’m stumbling upon a few Relay errors for which the depths of the internet have no answer yet. So, mostly because I’ll just repeat them in six months, here’s what I did wrong. Your mileage may vary.

“Warning: RelayContainer: Expected prop products supplied to ChartComponent to be data fetched by Relay. This is likely an error unless you are purposely passing in mock data that conforms to the shape of this component’s fragment.”

The only answers I could find were related to modification queriesI must be uniquely stupid to trigger it with a simple query . Solution: thou shalldThat’s Shakespeare for really should have long ago read Thinking in react: Data Masking. When you include a child’s fragment, you want to pass it exactly the object(s) it’s asking for. To debug, set a breakpoint in the parent’s render()

Object {__dataID__: "Vmlld2VyLXs6aWQ9PiJyb290In0=", products: Object}
  __dataID__ "Vmlld2VyLXs6aWQ9PiJyb290In0="
  products: Object // <-- This is not the object you're looking for
    __dataID__:"client:17486589601_first(100)"
      edges: Array[7]
        0:Object
          __dataID__: "client:client:17486589601:2"
          node: Object // <-- This is it. Always pass the object tagged "RelayFragmentPointer" as the child's prop
            2: RelayFragmentPointer
            [...]

Find RelayFragmentPointer and pass that to the child.

“Warning: expected a single record…”

The warning is actually spot onUnlike me, apparently. This is starting to be a bit embarrassing : If you define your fragment as such:

fragment on Product {         
  id,
  category,
  color
}

…it expects to get a single Product as a prop. I did this in an attempt to delegate the edges { node { ... boilerplate to the parent component. That may actually not be advisable, as the query variables would then have to be defined in the parent as well, and they just don’t belong there. This works:

  fragments: {
    products: () => Relay.QL`
      fragment on Viewer {
        products(first: 100) {
          edges {
            node {
              id,
              category,
              color
            }
          }
        }
      }
    `

“No connection implementation to wrap Product…”

This one’s actually from the GraphQL Relay Ruby Gem. I had just implemented a 1:n (belongs_to / has_many) relationship in rails and mindlessly assumed I’d need the connection mechanism to recreate that relationship in GraphQL. But that’s obviously bollocks As of now, this error is one of those rare cases where google returns exactly one match – the source file on Github. I appear to be the ONLY PERSON EVER to have managed to trigger this. Then again I soothe myself with the assumption that only a few million ever tried. – from the belongs_to class of the relationship, the connected class is just a field:

field :product, -> {ProductType}

[tbc]

React and Relay error scrapbook - March 3, 2016 - mw