🤔
graphql-requestのエラーの型が分からない
Next.js v13でGraphQLをpromiseで使うためにgraphql-request
を使っているのですが、エラーの型が分からなかったのでメモ。
typed-document-node
で記述しています。
graphql-request
const Component = () => {
const handleMutate = async () => {
try {
await new GraphQLClient('').request(HogeDocument).catch((e) => {
e // any
})
} catch (e) {
e // unknown
}
}
}
URQL
CombinedError
を使って判定が可能。
返り値にerror
が含まれるのでcatch
でキャッチする必要はない。
URQL
const Component = () => {
const [,muattion] = useMutation(HogeDocument)
const handleMutate = async () => {
try {
const { error } = await mutate()
if (error) {
error.graphQLErrors // GraphQLError[]
}
} catch (e) {
console.log(e) // その他のエラー
}
}
}
Apollo Client
ApolloError
を使って判定が可能。
返り値にerror
を含むしcatch
でも取得できる。
Apollo Client
const Component = () => {
const [mutate] = useMutation(HogeDocument)
const handleMutate = async () => {
try {
const { error } = await mutate()
if(errors) {
errors // ReadonlyArray<GraphQLError>
}
} catch (e) {
if (e instanceof ApolloError) {
e.graphQLErrors // ReadonlyArray<GraphQLError>
}
}
}
}
graphql-request
GraphQLのエラーは200
で返ってくるのにcatch
できるので何かしらエラーの加工をしているっぽい。
Error handling
の項目を見てもconsole.error(JSON.stringify(error, undefined, 2))
としか書いておらず、型が分からない。
src/types.ts
を見てみると、GraphQLResponse
のerror
の型がGraphQLError
となっている。
このGraphQLResponse
が使われている箇所を探すとClientError
にたどり着いたので、ClientError
のinstanceof
で判定するとほしい型が手に入りそうだった。
const Component = () => {
const handleMutate = async () => {
try {
await new GraphQLClient('').request(HogeDocument).catch((e) => {
if (e instanceof ClientError) {
e.response.errors // GraphQLError[] | undefined
}
})
} catch (e) {
if (e instanceof ClientError) {
e.response.errors // GraphQLError[] | undefined
}
}
}
}
error
をClientError
のinstanceof
で判定した後、e.response.errors
にアクセスするとGraphQLError[]
orundefined
が取得できる。
Discussion