GraphQL

GraphQLスキーマの具体的の利便性はおいておいて、スキーマが表すグラフの形をみてきれいということは可能なのだろうかと考えていた。 次数の偏りが少ないほうがいい？最短経路が短い方がいい？ GraphQLにはQuery型という特権的な型がある、APIを拡張するたびに、どんどんQueryのフィールドを追加していってるけど、これは仕方がないことのなのかと考えたのが発端だ。 Query --> A Query --> B Query --> C という感じでQueryからA,B,Cという型へのフィールドをはやしている。フィールドがグラフのエッジだ。 上のグラフの代わりに、以下のグラフを考えた。 Qu…

PerlでGraphQL APIを開発する手法を紹介した記事がWEB+DB PRESS Vol.129掲載されます。現在発売中です(2022年6月24日発売)。 gihyo.jp 連載「Perl Hackers Hub」の今回のテーマは「【第73回】Perlで作るGraphQL API」で、mangano-itoさん（@mangano_ito）、中岡 大樹さん（@nakaokat）執筆です。GraphQLはAPIのためのクエリ言語です。graphql-perlを使って実践的なGraphQL APIを開発する手法を解説します。#wdpress— WEB+DB PRESS編集部 (@wdpress…

GraphQL の schema から生成した型を利用してモックデータを作っていました。 今回 GraphQL の schema に特定の文字列が返されるフィールドを作成したく列挙型 (Enum) で Schema を定義していました。 schema.graphql emun IdolType { cute cool sexy pop } type Idol { id: ID! name: String! type: IdolType! } type Query { idols: [Idol] } 👇 生成された TypeScript の型 graphql.ts export enum Ido…

GraphQL API を開発していると、 どういうスキーマににしたらよいのかとチームメンバーのエンジニアに相談したい時が出てくる。 相談するときにUIのデザインももっていくと、相談される側がクライアントサイドの要求を認識できるので用意しておいたほうがよさそうだ。 サーバーサイドの開発をやってると、エンジニア同士の相談ではテキストベースになりがちだから自分でも注意したい。 デザイナーが作ったFigamaのページにアクセスする権限がなかったりするので、スクショでポンと見せるくらいが手軽でよさそう。

relay-compiler 13.2.0で確認した。つい昨日にRelay 14が出ていたので試してみたけど同様の結果になった。 特定のinterfaceに対するinline fragment内に、interfaceが共通して持つフィールドも都度列挙して書くと、直和型の __typename フィールドによる型の絞り込みが効くようになる。逆に、共通して持つフィールドをinline fragmentの外に書くと、型の絞り込みが効かなくなる。 # OK: __typenameによる絞り込みが効く fragment Foo_bar_ok on Bar { ... on Bar1 { __typena…

Express (TypeScript) で作成した GraphQL サーバーがエラーを返す際に message 以外の独自フィールドを追加してみたメモ express@4.18.1 graphql@15.8.0 express-graphql@0.12.0 typescript@4.7.2 Express GraphQL サーバー Mutation で username を引数にした login にクエリを投げ username が存在すればログインした体で username を返し、存在しなければエラーを返すだけの簡単な GraphQL サーバー // server.ts import e…

GraphQL に入門していて、GraphQL の schema などから TypeScript の型定義を自動生成するのがナウでヤングだと聞いたので試してみたのメモ。 この記事の対象 とりあえず GraphQL Code Generator で GraphQL の Schema から型定義ファイルを生成してみたい 調べると高度な情報が出てくるけど断片的で、まずどうやって導入するのかにで詰まった GraphQL Code Generator GraphQL のスキーマから TypeScript の方を生成できるライブラリ。他にもあるとおもうけど情報が多かったので GraphQL Code Ge…

こんにちは、X（クロス）イノベーション本部 ソフトウェアデザインセンター・セキュリティグループの大西です。現在、DockerとTypeScriptを使ってシステムを開発中です。DockerのDistrolessイメージの中で、ORMのPrismaを使おうとするとエラーが出てハマってしまったので、エラー解消の方法についてお話ししたいと思います。 まずは少し、DistrolessイメージとPrismaについて説明します。 Distrolessイメージとは Googleが公開しているDistrolessイメージとは、アプリケーションの実行に必要な最小限のファイルのみが入っている超軽量なDockerイ…

最近 OSS を clone コードを読むことが増えていて、どれくらいのペースでリポジトリを clone しているのか測りたくなってきた。計測は面倒なので気が向いた時で良いとして、計測したくなったときにできるよう、clone したリポジトリ一覧を後から集計できるようにしておきたい。— mizdra (@mizdra) 2022年8月5日 ということをふと思いついた。定量的に物事を見れると良い振り返りができて嬉しいと思う。とりあえず集計だけでもやってみる。 shell の history から一覧を作る どうやって一覧しよう、と思ってまず思いついたのが、shell の history を使う方法…

はじめまして。 株式会社アドグローブ ソリューション事業部エンジニアの藪内です。 今回はDockerでHasura環境を用意し、Event Triggersという機能を利用してSlack通知を試してみました。 この記事ではDockerファイル、Hasuraコンソールでのテーブル操作・EventTriggers設定方法を手順ベースでHasuraではこんなことができるよ！ということをご紹介できればと思います。 Hasura概要 本ブログで説明を割愛すること Docker環境構築とEvent Triggersの設定手順 1. Hasuraイニシャライズ 2. Docker環境のビルド 3. Hasu…

マンガ投稿チームでWebアプリケーションエンジニアをしているid:stefafafanです。この記事では、最近私がチーム向けに整備したDeployment Preview環境の事例を紹介します。 Deployment Previewとはどのようなものか？ チームとして求める要件 実現したDeployment Previewの全体像 1. DockerイメージをビルドしてArtifact RegistryにpushしてCloud Runで動かすまで GitHub Actionsでどのように実現したか 2. ロードバランサーと証明書の準備、またServerless NEGによる振り分け Certi…

swfz (ver 0.34.3) がリリースされました、更新内容は次のとおりです 技術 やったこと tilの画面変更、内部改善 gatsby-*.jsのTypeScript化 TypeScriptでの型チェック有効化 全文検索のUIをinstantsearch-dom -> instantsearch-hooks-webへ変更 ESLint導入した 参考記事を参考に関連記事を表示できるようにした toolsにGitHub ContributionのグラフをOGPにするページを追加した - 使用例 - Gatsby+CloudFlare Workersを試してみた - リポジトリ→gatsby…

はじめに 最近チーム内のごたごたでタスクが空いてしまったので常々気になっていた部分の整備を進めていた。 特に気になっていたのはReactで作っているフロントエンドにテストコードが殆ど無いことだった。一応コンポーネントを単体でテストするようなunitテストはあったのだが、フロントエンドをテストするならコンポーネントの単体テストよりも複数コンポーネントを組み合わせて機能をテストするような結合テストの方が有効で必要なので、現状にはあまり満足していなかった。 Write tests. Not too many. Mostly integration. で、実際に整備してみたわけである。 どうやったか …

wiki.jsに他のwikiからデータを移行した時に 日本語以外のロケールのページが大量に作られてしまった。 基本的に日本語のページだけで他の言語のページはあっても検索の邪魔になるだけなので纏めて削除したかった。 都合がいいことに、wiki.jsではGraphQL APIを使うことでページの作成や削除、検索などの操作が行える。 今回はこれを使って英語の記事だけを一括削除するシェルスクリプトを書いた。 1つめのcurlコマンドのオプションにある"variables":{"locale":"'$LOCALE'","query":""}の部分で指定した内容で検索を行い、 その結果をさらにjqコマンド…

挫折せずにReactに入門しよう 2021年9月に発売された最新のReactの本です。作者はUdemyのReact講座がベストセラーとなっているじゃけぇさん。「じゃけぇ本」と呼んでいる界隈もあるようです。内容もフルカラーで入門者に読みやすい本となっています。 僕は本書のターゲット層よりは先に進んでいる(はず)なのですが、とてもオトクなKindleポイント50%還元キャンペーン(実質半額！)をやっていたので復習も兼ねて読みました。

はじめに ↓の続き。 blog.m6a.jp プロフィールサイトを作って感覚を覚えたことだし、お次はユーザー認証やCRUD操作のあるアプリを作ってみようということで、趣味でやっているPodcastの管理画面をリプレイスしてみた。 できたもの できたものはこんな感じ。 もともとRailsのMPAで作っていたものをコピーしただけなので特に代わり映えはない。 Vue 3でリプレースしたPodcast管理画面 SPAにしたので、エピソード公開時の体験は改善した気がする。エピソード一覧の画面描画時に /episodes を叩き、その後 /episodes/:id/publishing にPOSTする的な…

frontendディレクトリに移動 今回の手順はfrontendディレクトリで行なっていくので、移動します。 % cd frontend/ 絶対パスインポートの設定 絶対パスインポートが使えるように、frontend/tsconfig.jsonのcompilerOptionsに設定を追加します。 "compilerOptions": { 〜省略〜 "baseUrl": ".", "paths": { "@/*": ["./*"] }, 〜省略〜 }, typesyncをインストール インストールします。 % yarn add -D typesync 実行できるか確認します。 % yarn ty…

The Graph助成金プログラムWave 6が終了：Wave 7にむけて The Graph Foundation 日本からの申請が増えていますが、可能であれば申請前にThe Graph Japanにご連絡いただければ幸いです。より成功率を上げるには準備とフィードバックが重要です。 助成金を受けられなかった理由と対策も提供できますし、過去には面接での不備や助成対象プログラムに対する納期の遅れなどの苦情も届いております。成功に向けて一緒に取り組んでいきましょう！ 日本版Twitter / 日本版Medium / 日本版Telegram The Graphのエコシステムの成長にとって、驚異的な1…