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

Question

前提・実現したいこと

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 を想定しているため。

// NOTE: `npx next` > Chrome DevTools console > paste below 
try {
  const res = await fetch('https://json-placeholder-graphql.herokuapp.com/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      query: `
        query BlogList {
          posts {
            id
            title
          }
        }
      `,
    }),
  })
  const data = await res.json();
  console.log(data);
} catch (e) {
  console.log('Error: ', e);
}

発生している問題・エラーメッセージ

Access 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.

POST https://json-placeholder-graphql.herokuapp.com/graphql net::ERR_FAILED
Error:  TypeError: Failed to fetch

試したこと

// import { gql, useQuery } from '@apollo/client';
import { gql, useQuery } from 'urql';

...

  const [{ data }] = useQuery<BlogListQuery>({
    query: gql`
      query BlogList {
        posts {
          id
          title
        }
      }
    `,
  });