CODEWITHSUNDEEP
react-nativegraphqlrelayjsrelay
Adam Ivancza
Adam Ivancza

Reputation: 2529

React Native graphql query with relay: fetched data not received

I have the following query:

query {
  viewer{
    place(id: "1a4871311fe990d6d94cf1eed9fd65008856e118b790e7dcf728d86bc3aef7ec"){
      name
    }
  }
}

which of course works correctly on GraphiQL. I would like to use this query in a Relay container so I've created a RootContainer:

<RootContainer
  Component={PlaceDetailsComponent}
  route={new PlaceDetailsRoute({placeID: this.props.id})}
  renderFetched={(data) => {
    console.log('data: ', data);
    return (
      <PlaceDetailsComponent {...this.props} {...data}/>
    )
  } }
  renderLoading={() => <ProgressBar visible={true} />}/>

which successfully fetches the data but all I can see on console is this:

data:  { placeID: '1a4871311fe990d6d94cf1eed9fd65008856e118b790e7dcf728d86bc3aef7ec',
  viewer: 
   { __dataID__: 'Vmlld2VyLXs6aWQ9PiJ2aWV3ZXIifQ==',
     __fragments__: { '1::client': [ {} ] } } }

So I checked out what's actually sent to server and what's received and all seems right to me:

enter image description here

Here is my route:

import Relay, { 
  Route
} from 'react-relay';

class PlaceDetailsRoute extends Route {
  static queries = {
    viewer: () => Relay.QL`
      query {
        viewer 
      }
      `
  }
  static routeName = 'PlaceDetailsRoute'
}

export default PlaceDetailsRoute;

and here is my fragment:

Relay.createContainer(PlaceDetailsContainer, {
  fragments: {
    viewer: () => Relay.QL`
      fragment on Viewer  {
        place(id: "1a4871311fe990d6d94cf1eed9fd65008856e118b790e7dcf728d86bc3aef7ec") {
          name,
        }
      }
      `
  }
});

Any suggestions what should I change? Thanks in advance for any help!

Upvotes: 1

Views: 205

Answers (1)

Ahmad Ferdous
Ahmad Ferdous

Reputation: 3399

That's actually expected behavior. The Relay documentation of renderFetched has a note:

Even though we have access to the data object in renderFetched, the actual data is intentionally opaque. This prevents the renderFetched from creating an implicit dependency on the fragments declared by Component.

Hope this clears up your confusion.

Upvotes: 2

Related Questions