現象
C#で作成した GraphQL Clientからは Azure上のGraphQLは問題なくデータ取得出来た
React-Appで作成したアプリでGraphQLをCallするとnetwork errorと表示される
原因
React-Appを起動する時は Http://localhost:3000
ローカル実行から他のサイト(GraphQL)をCallすると CROSでセキュリティー上NGだった
対応
package.jsonにproxyを追加
"proxy": "http://azure.japaneast.cloudapp.azure.com"
GraphQLをCallしているurlwも変更
"http://azure.japaneast.cloudapp.azure.com/graphql" ->
// urql Clientを作成
const client = createClient({
url: '/graphql', // Proxy経由
exchanges: [fetchExchange],
});
fetchExchange を追加しないとリモートからデータを取得しない
react-appから見たら GraphQLがCROS
Web Browserの開発toolで見るとしっかりと赤字でCROSと表示されていた
CROSを知らなかったことで1日潰してしまった .....Orz