GraphQL的Apollo不会返回所需的数据

Question

在我的应用程序中，当我将新数据插入输入字段并触发变异时。数据存储在Db（MongoDB）中，但Apollo不会返回更新的数据。在初始加载时，根据React组件代码检索和显示数据（即'song'属性）。但是，当需要通过突变推送新内容并且需要后续数据更新时，Apollo不会返回'song'属性并且会加载下面的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属性来更新。

Answer 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>
      );
   }
}