Vue ApolloがNuxtで利用可能になる @nuxtjs/apollo を使うときレスポンスが空だったら404を出したい場合があります。
下記のようにSmart Queryを使うと簡単にサーバーサイドとクライアントサイドでfetchする機能を書くことができます。
// pages/blog/_id.vue
import GetPosts from '~/apollo/GetPost.gql';
export default {
name: 'BlogIndex',
apollo: {
posts: {
query: GetPost,
variables () {
return {
pageId: 123,
};
},
},
},
}
しかしSmartQueryはレスポンスのHTTPステータスコードを設定できないという問題があります。
その場合は素直に asyncData()
を利用しましょう
// pages/blog/_id.vue
import GetPost from '~/apollo/GetPost.gql';
export default {
name: 'BlogPost',
async asyncData ({ error, app, params }) {
const response = await app.apolloProvider.defaultClient.query({
query: GetPost,
variables: { pageId: params.id },
});
if (!response.data.post) {
error({ statusCode: 404, message: 'Not Found' });
}
return { post: response.data.post };
},
data () {
return {
post: {},
};
},
};
ただそうなると @nuxtjs/apollo
を使う意義も薄くなってしまいますね。
vue-apolloの開発もあまり活発でないので何か別の手段を使ったほうがいいんでしょうか…。