2016-08-18 51 views
2

我有点失落,所以任何帮助将不胜感激!因此,这里是我想发送查询:反应原生graphql查询与继电器不工作

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

到目前为止好,这个查询工作,当我尝试它GraphiQL。该查询返回一个PlaceConnection对象。现在,我试图实现相同的上反应原生带继电器:

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} />}/> 

但是当我试图抓住这个我收到以下错误信息:

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 
     ^^^ 

所以我检查什么实际发送到服务器: enter image description here

在我看来,片段是作为一个单独的查询而不是选择发送。任何想法为什么会发生这种情况,或者我该如何避免这种行为?

编辑:

这里是我最后的代码 - 希望这将是一些有用的: https://gist.github.com/adamivancza/586c42ff8b30cdf70a30153944d6ace9

回答

2

我认为问题是,你的传递路线是太深了。取而代之的是,你的路线,只是查询使用的viewer

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

然后,你的组件里面,把它定义为一个fragment on viewer,而不是在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 
       } 
      } 
      } 
     } 
     ` 
    } 
}) 

你需要移动变量($lag,$lng等)被定义为容器的一部分,而不是被定义为路径的一部分。但我认为应该解决你的问题。

+0

你是我的男人@ryan!感谢您的信息 - 我终于设法根据您的答案现在运行查询。将发布我的整个代码。还有一个问题: 您在名为'search_places'的连接上提供了'edges'字段,但是您没有提供必要的参数。使用'find','first'或'last'参数。 你有什么建议,我应该如何设置这些值?这不是必须由中继自动完成吗? – Roosevelt

+0

所以Relay需要你使用'first'或'last'参数,尽管GraphQL不支持。例如,您希望将其添加到“search_places(first:100)”中以获取前100个搜索位置。如果你想要所有这些,你可以使用像“first:999999999”这样的解决方法。 – Ryan