Question

我是Relay的新手，我在使用GraphQL服务器时遇到了问题。

我已将来自中继主页的Tea样本调整为SWAPI中继服务。我克隆了swapi-graphql，并在快递服务器上添加了cors。我用这段代码测试了链接：

var query = `
  {
    allFilms {
      edges {
        node {
          id
        }
      }
    }
  }
`

fetch("http://localhost:50515/graphiql?query=" + query)
  .then(response=>response.json())
  .then(json=>console.log(json))

我收到了服务器的回复，我看到了一些网络动作，它有效！我可以与graphiql服务进行通信。

接下来，我创建了一个类似于TeaStoreQuery的查询结构。我tested它，它返回了预期的结果。

query AllFilmQuery {
  allFilms {
    ...filmListFragment
  }
}

fragment filmListFragment on FilmsConnection {
  edges {
    node {
      ...filmFragment
    }
  }
}

fragment filmFragment on Film {
  id
  title
  releaseDate
}

你如何使用RELAY工作？

我无法弄清楚如何使用Relay来查询服务器。这是我从茶样本中改编的代码。

import { render } from 'react-dom'
import { 
  RootContainer, 
  createContainer, 
  Route, 
  injectNetworkLayer 
} from 'react-relay'

// React component for each star wars film
const Film = ({ id, title, releaseDate }) => 
  <li key={id}>
    {title} (<em>{releaseDate}</em>)
  </li>

// Relay container for each film
const FilmContainer = createContainer(Film, {
  fragments: {
    film: () => Relay.QL`
      fragment on Film {
        id,
        title,
        releaseDate
      }
    `
  }
})               

// React component for listing films       
const FilmList = ({ films=[] }) => 
  <ul>
    {films.map(
      film => <Film {...film} />
    )}
  </ul>

// Relay container for Listing all Films
const FilmListContainer = createContainer(FilmList, {
  fragments: {
    films: () => Relay.QL`
      fragment on FilmsConnection {
        edges {
          node {
            ${ Film.getFragment('film') }
          }
        }
      }
    `
  }
})    

// The Home Route
class FilmHomeRoute extends Route {
  static routeName = 'Home'
  static queries = {
    allFilms: (Component) => Relay.QL`
      query AllFilmQuery {
        allFilms {
          ${Component.getFragment('allFilms')}
        }
      }
    `
  }
}

// Is this how you setup a network layer
// I am using CORS, and I testing the graphql service with fetch
// The graphql service works but Relay never seems to try to connect
Relay.injectNetworkLayer(
  new Relay.DefaultNetworkLayer('http://localhost:50515/graphiql')
)

render(
  <RootContainer
    Component={FilmListContainer}
    route={new FilmHomeRoute()}
  />,
  document.getElementById('react-container')
)

当我运行此示例（source | output）时，我没有看到任何尝试发出网络请求。我确实看到了一个错误＆＃34;无法渲染null＆＃34;的地图。好像它无法映射所有电影数据。

我做错了什么？

Answer 1

根据this document的第5.1节，“中继对象识别规范”：

符合中继的服务器可能会暴露不是复数的根字段，用于识别根字段;中继客户端将无法在查询中将这些字段用作根字段。

根据此规范，Relay无法查询查询根目录下的多个字段，除非该字段采用精确映射到结果的参数列表。这意味着allFilms字段不能与Relay一起使用。您可以在其他StackOverflow答案中了解有关限制的更多信息：How to get RelayJS to understand that a response from GraphQL is an array of items, not just a single item

如果您希望使用具有返回数组的根字段的GraphQL模式，您可能希望使用不同的GraphQL客户端，因为Relay对其使用的模式类型特别严格。 graphql.org有一个列表：http://graphql.org/code/#graphql-clients

无法让Relay通过网络进行GraphQL调用

1 个答案: