Help us understand the problem. What is going on with this article?

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした