前提・実現したいこと
GraphQLエンドポイントから、client fetch したい。
以下の条件を満たす。
- fetch 先は、GraphQL エンドポイントである(今回は、https://json-placeholder-graphql.herokuapp.com/graphql)
- Node.js ではなく、クライアント環境である(今回は、Chrome DevTools の console タグ)
- データは、データ取得例 | GraphiQL 形式である。
- Apollo の useQuery() ではなく、fetch を使用する。
useSWR()
の Client Side Fetching を想定しているため。
javascript
1// NOTE: `npx next` > Chrome DevTools console > paste below 2try { 3 const res = await fetch('https://json-placeholder-graphql.herokuapp.com/graphql', { 4 method: 'POST', 5 headers: { 6 'Content-Type': 'application/json', 7 }, 8 body: JSON.stringify({ 9 query: ` 10 query BlogList { 11 posts { 12 id 13 title 14 } 15 } 16 `, 17 }), 18 }) 19 const data = await res.json(); 20 console.log(data); 21} catch (e) { 22 console.log('Error: ', e); 23}
発生している問題・エラーメッセージ
javascript
1Access to fetch at 'https://json-placeholder-graphql.herokuapp.com/graphql' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
javascript
1POST https://json-placeholder-graphql.herokuapp.com/graphql net::ERR_FAILED 2Error: TypeError: Failed to fetch
試したこと
typescript
1// import { gql, useQuery } from '@apollo/client'; 2import { gql, useQuery } from 'urql'; 3 4... 5 6 const [{ data }] = useQuery<BlogListQuery>({ 7 query: gql` 8 query BlogList { 9 posts { 10 id 11 title 12 } 13 } 14 `, 15 });
![guest](/img/icon/icnUserSample.jpg)
あなたの回答
tips
プレビュー