Apollo For GraphQL 不返回所需数据答案

【问题标题】：Apollo For GraphQL Does Not Return Required DataApollo For GraphQL 不返回所需数据
【发布时间】：2018-06-12 01:39:58
【问题描述】：

在我的应用程序中，当我将新数据插入输入字段并触发突变时。数据存储在 Db (MongoDB) 中，但是，Apollo 不返回更新的数据。在初始加载时，数据（即“歌曲”属性被检索并根据 React 组件代码显示）。但是，当通过突变推送新内容并且需要后续数据更新时，Apollo 不会返回“歌曲”属性，这会加载下面 React 组件代码的<div>loading...</div> 行。刷新页面后错误已解决。

我的 React 组件是：

class SongDetail extends Component{
   render(){
      const { song } = this.props.data;
      console.log( "song details are...", this.props, "---", song );
      if( !song ) return <div>loading...</div>;
      return(
         <div>
            <Link to = "/">Back</Link>
            <h3>{ song.title }</h3>
            <LyricList lyrics = { song.lyrics }/>
            <LyricCreate songId = { this.props.params.id }/>
         </div>
      );
   }
}

export default graphql( fetchSong, {
   options : ( props ) => {
      return { variables : { id : props.params.id }};
}})( SongDetail );

'fetchSong'查询如下：

const fetchSong = gql`
   query fetchSong( $id : ID! ){
      song( id : $id ){
         id,
         title,
         lyrics {
            id,
            content
         }
      }
   }
`;

我正在使用配置选项将id 映射到整个商店。

const client = new ApolloClient({
   dataIdFromObject : o => o.id
});
...
      <ApolloProvider client = { client }>
...

我不确定应用程序提供哪些更多信息会有所帮助。重申我上面写的： LyricCreate 组件通过mutation 查询成功地将新内容存储到存储中。但是，在存储新的歌词内容后，Apollo 不会通过检索 song 属性来更新。

【问题讨论】：

可能是缓存问题。如果我理解正确，apollo 客户端会正确检索加载信息，但在您通过与 LyricCreate 组件交互触发突变时不会更新它。我会将数据检索放在一个单独的函数中，并设置 apollo 客户端的 fetchPolicy 或触发更新回调以手动更新我的缓存。 apollographql.com/docs/react/basics/… 或 howtographql.com/react-apollo/…（更新缓存）

标签： javascript graphql apollo graphql-js react-apollo

【解决方案1】：

您的代码看起来不错，但为什么要使用if( !song ) return <div>loading...</div>;？也许我们应该尝试：

class SongDetail extends Component{
   render(){
      const { song, loading } = this.props.data;
      console.log( "song details are...", this.props, "---", song );
      if( loading ) return <div>loading...</div>; // loading = false when done loading and ready
      return(
         <div>
            <Link to = "/">Back</Link>
            <h3>{ song.title }</h3>
            <LyricList lyrics = { song.lyrics }/>
            <LyricCreate songId = { this.props.params.id }/>
         </div>
      );
   }
}

【讨论】：