React Native graphql 查询与中继不起作用

Posted 2023-03-08

【中文标题】React Native graphql 查询与中继不起作用

【英文标题】：React Native graphql query with relay not working

【发布时间】：2016-12-25 03:00:29

【问题描述】：

我对这个问题有点迷茫，所以任何帮助都将不胜感激！所以这是我想发送的查询：

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

到目前为止一切顺利，当我在 GraphiQL 上尝试时，此查询正在运行。此查询返回一个 PlaceConnection 对象。现在我尝试使用 Relay 在 React Native 上实现相同的功能：

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

所以我检查了实际发送到服务器的内容：

在我看来，片段是作为单独的查询而不是选择发送的。知道为什么会发生这种情况或如何避免这种行为吗？

编辑：

这是我的最终代码 - 希望对某些人有所帮助： https://gist.github.com/adamivancza/586c42ff8b30cdf70a30153944d6ace9

【参考方案1】：

我认为问题在于您的中继路线太深了。相反，将您的路由定义为仅针对 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 等）以定义为容器的一部分，而不是定义为路径的一部分。但我认为这应该可以解决您的问题。

【讨论】：

你是我的男人@ryan！感谢您的信息 - 我终于设法根据您的回答现在运行查询。将发布我的整个代码。还有一个问题：您在名为search_places 的连接上提供了edges 字段，但您没有提供这样做所必需的参数。使用find、first 或last 参数。你对我应该如何设置这些值有什么建议吗？这不是必须由 Relay 自动完成吗？

所以 Relay 要求您使用 first 或 last 参数，尽管 GraphQL 不需要。例如，您希望将其添加到 search_places(first: 100)，以获取前 100 个搜索地点。如果你想要所有这些，你可以使用像first: 999999999这样的解决方法。