Roosevelt Roosevelt - 3 months ago 20
React JSX Question

React Native graphql query with relay not working

I'm kinda lost with this issue so any help would be appreciated! So here is the query that I would like to send:

query {
viewer{
search_places(lat: "40.7127", lng: "-74.0059", searchType:"all", searchTerm:"shopping"){
edges{
node{
id,
name,
lat,
lng
}
}
}
}
}


so far so good, this query is working when I try it on GraphiQL. This query returns a PlaceConnection object. Now I tried to implement the same on React Native with Relay:

class SearchPlacesRoute extends Route {
static paramDefinitions = {
lat : { required: true },
lng : { required: true },
searchType : { required: true },
searchTerm : { required: true }
}
static queries = {
search_places: () => Relay.QL`
query {
viewer{
search_places(lat: $lat, lng: $lng, searchType: $searchType, searchTerm: $searchTerm)
}
}
`
}
static routeName = 'SearchPlacesRoute'
}

class SearchPlacesComponent extends Component {
render () {
const places = this.props.search_places;
console.log(places);
for (var index = 0; index < places.length; index++) {
var element = places[index];
console.log(element);
}
return (
<View>
<Text>email: {places[0].name}</Text>
</View>
)
}
}

SearchPlacesComponent = Relay.createContainer(SearchPlacesComponent, {
fragments: {
search_places: () => Relay.QL`
fragment on PlaceConnection {
edges
{
node
{
id,
name,
lat,
lng
}
}
}
`
}
})

<RootContainer
Component={SearchPlacesComponent}
route={new SearchPlacesRoute({lat:"40.7127", lng: "-74.0059", searchType:"all",searchTerm: "shopping"})}
renderFetched={(data) => <SearchPlaces {...this.props} {...data} />}/>


but when I try to grab the data with this I get the following error:

1. Objects must have selections (field 'search_places' returns PlaceConnection but has no selections)
_search_places40zPNn:search_places(lat:"40.7127",lng:"-7
^^^
2. Fragment F0 on PlaceConnection can't be spread inside Viewer
...F0
^^^


So I examined what's actually sent to the server:
enter image description here

and it seems to me that the fragment is sent as a separate query instead of a selection. Any idea why is this happening or how can I avoid this behaviour?

Answer

I think the problem is that your Relay Route is too deep. Instead, define your route to just query against viewer:

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

Then, inside of your component, define it as a fragment on viewer, instead of on PlaceConnection:

SearchPlacesComponent = Relay.createContainer(SearchPlacesComponent, {
  initialVariables: { lat: "..." /* TODO */ },
  fragments: {
    viewer: () => Relay.QL`
      fragment on viewer {
        search_places(lat: $lat, lng: $lng, searchType: $searchType, searchTerm: $searchTerm) {
            edges 
            {
              node 
              {
                id,
                name,
                lat,
                lng
              }
            }
          }
        }
      `
  }
}) 

You'll need to move the variables ($lag, $lng, etc) to be defined as part of the container, instead of being defined as part of the route. But I think that should fix your problem.