質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
GraphQL

GraphQL は、アプリケーション・プログラミング・インタフェース (API) 向けのクエリ言語およびサーバーサイドランタイムです。APIの速度、柔軟性、開発者にとっての使いやすさを向上させるために設計され、データを複数のデータソースから取得するリクエストを1つのAPI呼び出しで構成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

0回答

843閲覧

GraphQL エンドポイントで, client fetch する方法 (net::ERR_FAILED)

kuro3

総合スコア27

GraphQL

GraphQL は、アプリケーション・プログラミング・インタフェース (API) 向けのクエリ言語およびサーバーサイドランタイムです。APIの速度、柔軟性、開発者にとっての使いやすさを向上させるために設計され、データを複数のデータソースから取得するリクエストを1つのAPI呼び出しで構成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

1クリップ

投稿2021/05/13 07:32

前提・実現したいこと

GraphQLエンドポイントから、client 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 });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問