Hatena-Textbook 2018学習日記(5) - GraphQL編 - $shibayu36->blog;のようにHatena-Textbookを用いて最近のモダンなWebアプリケーション開発の学習をしているのだけど、TypeScript + GraphQL + Apollo Client + Reactの部分でそれぞれの技術の基本知識を理解できていなかったので、エラーが起きたときに何から直したらよいかわからない状態になってしまっていた。
前回はGraphQLのクエリについて学んだ - $shibayu36->blog;でGraphQLを少し掘り下げたので、今回はApollo platformについてチュートリアル( https://www.apollographql.com/docs/tutorial/introduction/ )を行いながら学習を進めていった。
JSからGraphQLを使うときにめっちゃ便利に使えるフレームワーク。これだけでGraphQLサーバも書けるし、クライアントからGraphQLサーバへのアクセスも書ける。
特に面白いなと思ったのは、サーバサイドのGraphQLスキーマを、クライアントサイドで拡張して、GraphQLサーバのデータとクライアントサイドのデータを透過的に扱えるところ。これによって状態の取り扱いが非常にやりやすくなりそう。世のフロントエンドエンジニアにApollo Clientを布教したい - Qiitaが分かりやすいので参照のこと。
学習メモ
あとは学習メモ。今はApollo Clientの方を特に学習したかったので、GraphQLのサーバを作る部分はほとんどメモはない。
4. Run your graph in production - Apollo Basics - Apollo GraphQL Docs
- Graph ManagerというGraphQLのSchemaをアップロードできるクラウドサービスがある
5. Connect your API to a client - Apollo Basics - Apollo GraphQL Docs
- Apollo Clientを使うことでいい感じにキャッシュをしてくれる
- またlocalでもremoteでも透過的に扱うことができる
6. Fetch data with queries - Apollo Basics - Apollo GraphQL Docs
- useQueryはdata, loading, errorを使う形式が最もよく使う。
const { data, loading, error } = useQuery(GET_LAUNCHES);
- useQueryではfetchMoreを取ってきて、ページングすることができる。fetchMoreにわたすupdateQueryの返す値は、これまでのデータをmergeしたものを返す必要がある
fetchMore({
variables: {
after: data.launches.cursor,
},
updateQuery: (prev, { fetchMoreResult, …rest }) => {
if (!fetchMoreResult) return prev;
return {
…fetchMoreResult,
launches: {
…fetchMoreResult.launches,
launches: [
…prev.launches.launches,
…fetchMoreResult.launches.launches,
],
},
};
},
})
const { data, loading, error } = useQuery(
GET_LAUNCH_DETAILS,
{ variables: { launchId } }
);
- fetchPolicyを用いれば、キャッシュから先に取得するかなどの条件を変更できる。network-onlyを使えば毎回APIから取得してくれる
const { data, loading, error } = useQuery(
GET_MY_TRIPS,
{ fetchPolicy: "network-only" }
);
7. Update data with mutations - Apollo Basics - Apollo GraphQL Docs
- mutationの処理にはuseMutationを使う。useMutationを使うとmutateのための関数が返ってくるので、それをコンポーネントに引き渡し、利用すると良い
- また、ログイン処理で返ってきた値をlocalStorageに保存するなどの処理は、onCompletedを使う。
- Apollo Clientを直接参照したいときはuseApolloClientを使う。これをすることでclientに保持されているデータにアクセスできる
export default function Login() {
const client = useApolloClient();
const [login, { loading, error }] = useMutation(
LOGIN_USER,
{
onCompleted({ login }) {
localStorage.setItem('token', login);
client.writeData({ data: { isLoggedIn: true } });
}
}
);
if (loading) return <Loading />;
if (error) return <p>An error occurred</p>;
return <LoginForm login={login} />;
}
- Apollo Clientがリクエストするときに送信するヘッダはnew ApolloClientのときに指定できる。これを使えばログイントークンをAuthorizationヘッダに含めるなどのことができる。
const client = new ApolloClient({
cache,
link: new HttpLink({
uri: 'http://localhost:4000/graphql',
headers: {
authorization: localStorage.getItem('token'),
},
}),
});
8. Manage local state - Apollo Basics - Apollo GraphQL Docs
- 内部状態はreduxなど別のものを使わずApollo cacheに統一しておくのが良い
- 内部状態の取得はスキーマを定義することでGraphQLと同じような形で取得できる。
- extendを使ってサーバーのスキーマを拡張できる
export const typeDefs = gql`
extend type Query {
isLoggedIn: Boolean!
cartItems: [ID!]!
}
extend type Launch {
isInCart: Boolean!
}
extend type Mutation {
addOrRemoveFromCart(id: ID!): [Launch]
}
`;
- クライアント側のスキーマを使うときは、@client directiveを使うことでアクセスできる。cacheのdataに入っているものは特にclient側のresolversを定義せずとも取得できる？以下のようにしていればclientサイドで作ったisLoggedInやcartItemsは取得できそう
cache.writeData({
data: {
isLoggedIn: !!localStorage.getItem(‘token’),
cartItems: [],
},
});
- ↑を取得するためのクエリは@client directiveを使ってこう書く
query IsUserLoggedIn {
isLoggedIn @client
}
query GetCartItems {
cartItems @client
}
- クライアントサイドでresolverを定義すれば、サーバのGraphQLスキーマに対し、Virtual Fieldを付与することもできる。以下はサーバ側のLaunch typeに対し、isInCartフィールドを追加する例。
export const resolvers = {
Launch: {
isInCart: (launch, _, { cache }) => {
const { cartItems } = cache.readQuery({ query: GET_CART_ITEMS });
return cartItems.includes(launch.id);
},
},
};
- useMutationのrefetchQueriesを使うことで、更新後のデータの再取得ができる
- localデータのmutationを定義するときは、cache.writeQueryを使うと便利
export const resolvers = {
Mutation: {
addOrRemoveFromCart: (_, { id }, { cache }) => {
const { cartItems } = cache.readQuery({ query: GET_CART_ITEMS });
const data = {
cartItems: cartItems.includes(id)
? cartItems.filter(i => i !== id)
: […cartItems, id],
};
cache.writeQuery({ query: GET_CART_ITEMS, data });
return data.cartItems;
},
},
};
