React Native graphql query with relay not working - reactjs

Question

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:
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?
EDIT:
here is my final code - hope it'll be helpful for some:
https://gist.github.com/adamivancza/586c42ff8b30cdf70a30153944d6ace9

Answer 1

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.