Apollo For GraphQL 不返回所需数据

Posted 2023-03-10

【中文标题】Apollo For GraphQL 不返回所需数据

【英文标题】：Apollo For GraphQL Does Not Return Required Data

【发布时间】：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/…（更新缓存）

【参考方案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>
      );