GraphQLとフロントエンド
● fragmentで引いた値をそのままコンポーネントに渡すことができる
○ GraphQLスキーマとコンポーネント (UI)がうまく対応できるようにスキーマを考える必要がある
👆コンポーネント使う側
👆コンポーネントの引数 memberにfragmentで引いた値をいれるだけでよい
interface Props {
member: WebAccountFragment;
}
export const WebAccount: React.VFC = ({ member }) => {
return (
{user.__typename === 'Designer' && Adobe ID: {member.adobeID} }
);
};
fragment GitHubName on Member {
id
githubID
}
👆コンポーネント定義側
fragment WebAccount on Member {
id
githubID
... on Designer {
adobeID
}
}
Interfaceが 特定の型だったときのみ
持ってくるデータが書ける
… on Designer と対応した記述ができる
(designerだったらAdobe IDを表示する)