GraphQLのquery
query query名 {
テーブル名 (
where: {
項目名: { eq: 値 }
}
) {
取得項目
}
}
whereのオペレーション
| eq | 指定した値と一致する(=) |
| ne | 指定した値と一致しない(!=) |
| gt | 指定した値より大きい(>) |
| ge | 指定した値以上(>=) |
| lt | 指定した値より小さい(<) |
| le | 指定した値以下(<=) |
| between | 指定した1つ目の値よりも大きく、2つめの値よりも小さい |
| contains | 指定した値が含まれる |
| notContains | 指定した値が含まれない |
| beginsWith | 指定した値で先頭一致 |
| and | すべての条件を満たす |
| or | いずれかの条件を満たす |
| not | 指定した条件を満たさない |
データベースがSQL Server
管理プログラムをMAGICで作成、このデータをRest APIで公開するのだが
GraphQLを使って公開した
nugetには GraphQL.NETと Hot Chocolateがあった
両方とも今年に更新されているので どちらを選ぶか迷いました
Hot Chocolateの方が.NET8に対応なので こちらを選択
nugetからソリューションに追加
EF Coreと連携して SQL ServerのデータをGraphQLとして簡単に公開出来ました
SQL Server側でViewを作成後、GraphQLで公開すればClient側は
凄くシンプルになった。
現象
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を知らなかったことで１日潰してしまった .....Orz
