Instagramクローンコード12日目-FE

#8.0 useParams
reactの<Link>タグでは、hrefは静的アドレスのみである.ダイナミックアドレスはtoを使用します.

//Header.js
<Link to={`/users/${data?.me.username}`}>
	<Avatar url={data?.me?.avatar} />
</Link>

App.jsにルータを設定します.このとき:변수명を行うと,userParamsを用いて伝達することができる.

//App.js
<Route path={`/users/:username`}>
	<Profile />
</Route>

//Profile.js
import { useParams } from "react-router-dom";

function Profile() {
    const { username } = useParams();
    return username;
}

export default Profile;

#8.1 Fragments
fragmentは、他のクエリで使用可能なgraphqlコードセグメントです.

//fragments.js
import { gql } from "@apollo/client";

export const PHOTO_FRAGMENT = gql`
    fragment PhotoFragment on Photo{
        id
        file
        likes
        totalComments
        isLiked
    }
`;

次のようにインポートします.

//Home.js
const FEED_QUERY = gql`
    query seeFeed {
    seeFeed {
      ...PhotoFragment
      caption
      createdAt
      isMine
      user {
        username
        avatar
      }
      comments { ...CommentFragment }
    }
  }
  ${PHOTO_FRAGMENT}
  ${COMMENT_FRAGMENT}
`;

#8.2 KeyFields
graphsqlからidを取得すると、キャッシュに保存できません.デフォルトではidは一意の識別子として指定されているためです.
他の一意識別子を使用する場合は、apollo cacheで次のように設定して一意識別子として使用できます.

//apollo.js
export const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache({
        typePolicies: {
            User: {
                keyFields: (user) => `User:${user.username}`,
            }
        }
    }),
});

#8.3 Follow & UnFollow
useMutationまたはuseQueryを使用する場合、updateとonClimpletedの違いは、cacheをパラメータとして受け入れるかどうかです.

//Profile.js
const unfollowUserUpdate = (cache, result) => {
    const { data: { followUser: { ok } } } = result;
    if (!ok) {
      return;
    }
    cache.modify({
      id: `User:${username}`,
      fields: {
        totalFollowers(prev) {
          return prev - 1;
        },
        isFollowing(prev) {
          return false;
        }
      }
    });
};

const [unfollowUser] = useMutation(UNFOLLOW_USER_MUTATION, {
    variables: {
      username,
    },
    update: unfollowUserUpdate
});

ただし、onCompletedはapolloクライアントを使用してキャッシュにアクセスすることもできます.

//Profile.js
const client = useApolloClient();

const followUserCompleted = (data) => {
    const { followUser: { ok } } = data;
    if (!ok) {
      return;
    }
    const { cache } = client
    cache.modify({
      id: `User:${username}`,
      fields: {
        totalFollowers(prev) {
          return prev + 1;
        },
        isFollowing(prev) {
          return true;
        }
      }
    });
}

const [followUser] = useMutation(FOLLOW_USER_MUTATION, {
    variables: {
      username,
    },
    onCompleted: followUserCompleted,
})