Hasura + Auth0 に関するメモ

Hasuraでカラムを増やす場合の注意

Hasura側でカラムを増やした場合、HasuraのGraphiQLからはGraphQLリクエストが正しく実行できるが、Permissionの設定をしないとフロント側からGraphQLリクエストしても当該カラムが存在しないことになって表示されない。

Auth0のAllowed Web Originsのドメインの末尾の/(スラッシュ)を消す

Auth0のAllowed Web Originsのドメイン名の末尾に/がついていると、レスポンスが異常に遅くなる

リアルタイムに変更を受け取る場合はqueryではなくsubscription

チャットなど変更のリアルタイム監視をする場合はWebSocketLinkとsubscriptionを使う。

Invariant Violation: Must contain a query definition エラーの対策

subscritpionしているものをmutationする際にキャッシュ操作をすると出る。そもそもキャッシュ操作をしなくても良さそう?

Routeが効かない場合の対策

Routeの設定で /callbackと / に対して明示的にコンポーネントを指定する。

文字列をinsertする際に GraphQL error: invalid input syntax for integer エラーが出る場合

insert先のカラムと送信している値の型が違うとこのエラーが出る。

私の場合、あるテーブルのidがINT型 owner_idがTEXT型のときに、誤ってidとauth0のText型 のidを照合していたため出ました。

管理画面からinsertできるのにフロントエンドからできない場合

hasura側のDATAのPermissionでInsertの権限を確認する

URLを/hoge/:idなどにした場合にRouteがうまく機能しない場合

matchの値が取得できない時は、withRouterが遷移先のページに設定されているかを確認する。

Error: GraphQL error: Check constraint violation. insert check constraint failed エラーの対策

フロントエンド側だけでエラーが発生する場合、だいたいhasura側のDATAのPermissionに問題がある場合が多いです。

create-react-appで作ったプロジェクトをビルド後サブディレクトリに公開したい場合の設定

package.jsonにhomepageオプションを追加します。/sub-directory/となっているところを任意のディレクトリ名にすればOKです。

・・・"private": true,
  "homepage": "/sub-directory/",
  "dependencies": {・・・

emotionでplaceholderのスタイルを変更する

&::placeholoderでplaceholderのスタイルを指定できます。

const inputStyle = css`
&::placeholder{
font-family: serif;
}`

opensslでエラーが出てpemファイルが作れない場合

openssl rsa -in ~/.ssh/id_rsa -outform pem > id_rsa.pem

上記コマンドでPEMファイルを作ろうとすると以下のようなエラーが出る場合があります。

unable to load Private Key
4596061804:error:0906D06C:PEM routines:PEM_read_bio:no start line:pem_lib.c:697:Expecting: ANY PRIVATE KEY

以下の通りsudoをつけて実行するとうまくいきました。

sudo openssl rsa -in ~/.ssh/id_rsa -outform pem > id_rsa.pem

Reactでビルドした際にManifest: Line: 1, column: 1, Unexpected token.エラーが出る対策

publicディレクトリのindex.html中の以下の場所にcrossoriginの設定を追加すると出なくなりました。

<link rel="manifest" crossorigin="use-credentials" href="%PUBLIC_URL%/manifest.json" />

Emotionでエラーが出る場合に確認すべき点

CSS-in-JSのライブラリEmotionでエラーが出る場合に確認すべき点をメモしておきます

冒頭のコメントがない

/** @jsx jsx */ を忘れていませんか?

jsxコンポーネントの明示的配置

creat-react-appでEmotionとTypeScriptを後から導入した場合にエラー( jsx is not defined )が出る場合があります。

jsx; を各種importの下に追加して明示的に配置することで解決する場合があります。

詳細はこちらの記事にも書いています

React + Emotion + TypeScriptでReferenceError: jsx is not definedのエラーが出る場合の対策

create-react-appで作ったReactのプロジェクトにCSS-in-JSのライブラリEmotionTypeScriptを導入した際にエラーが出る場合の対策方法です。

続きを読む

DockerでWordPressを動かす

docker-compose up -d

でコンテナを起動

/wp-json/wp/v2/postsにアクセスするとエラーが出てREST APIが使えない場合はWordPressのパーマリンクの設定を
http://localhost:3000/sample-post/

となるようにする。

Reactで画像を表示する方法

Reactで画像を表示する方法をメモしておきます。
まず、使いたい画像の画像のパスを指定してimportして {モジュール名}を使ってimportした名前で呼び出します。具体的には以下のような形です。

import Icon from './images/icon.svg'
const IconComponent = () =>{
  return <img src={Icon}  alt="アイコン" />
}
export default IconComponent

SVGがうまく表示されない場合、SVGファイルをテキストエディタで開いてimg/pngになっている部分をimage/pngにすると表示されます。

MacOS MojaveでGitが動かない場合の対策

MacOSをMojaveにアップデートした後ターミナル上でGitが動かなくなりました。具体的には以下のようなエラーが出ました。

xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
続きを読む