fetchPolicyをcache-and-networkにした時、毎回Loadingがtrueになる

はじめに

apollo clientを絶賛勉強中です。間違いがあったらお教えください。

問題

cacheを有効にする際、fetchPolicyを設定する場合があると思います。fetchPolicyのそれぞれの違いは、Apollo Client公式docから確認できます。
cache-firstはcacheをまず見にいって、cacheになければデータを取りに行くというものです。そのため一度取ってきた情報が残り続けてしまい、画面が更新されないということが起こります。cache-and-networkはcacheをまず見に行くところは同じですが、常にNetworkから最新のデータを持ってきてcacheに保存します。
そのため、今回cache-and-networkを使おうと思うのですが、cache-and-networkではnetworkからデータを取りに行く際にLoadingがtrueになってしまい、実際にアプリで使ってみるとcacheが有効になっていない場合と差がないように表示されます。
そのため、今回はcacheがある場合はLoadingを流さず、cacheにあるデータを表示し、裏で取ってきたデータに途中で切り替わるというようなものを作りたいと思います。

変更前

簡単な例で今回変更する部分のコードを示します。（元のコードは前回のQiitaで載せたもの）変更前後の差分を見てもらえればと思います。

const COMMENTS_QUERY = gql`
  {
    commentDetail(title:"初めて利用してみた"){
      id
      comment
    }
  }
`;

export default function Comments(){
  const { loading, error, data } = useQuery(COMMENTS_QUERY);

  if (loading) return <p>Loading...</p>;
  if (error) {
    return <p>Error</p>;
  }

  return (
    <div >
      <div>comment:{data.commentDetail.comment}</div>
    </div>
  );
};

変更後

networkからデータを取ってきているかつcacheがない場合のみLoadingが表示されるように変更しました。

const COMMENTS_QUERY = gql`
  {
    commentDetail(title:"初めて利用してみた"){
      id
      comment
    }
  }
`;

export default function Comments(){
  const { loading, error, data } = useQuery(COMMENTS_QUERY);

  if (！data && loading) return <p>Loading...</p>
  if (error) {
    return <p>Error</p>;
  }

  return (
    <div >
      <div>comment:{data.commentDetail.comment}</div>
    </div>
  );
};

終わりに

実装することはできたけども、最新のデータがcacheのものと違う場合いきなり切り替わるので、それが嫌な人は結局Loadingを表示させる方がいいのかなと思いました。

参考文献

以下の記事を参考にさせてもらいました。ありがとうございました。
Set network status to 3 with cache-and-network fetch policy #1217