JSのmap関数で今参照しているアイテムの直前のアイテムを参照したい場合についてです。
array.map((item,index,array)=>{
...
})
map関数で第3引数にオリジナルの配列を渡せるのでそれを使って参照すればOKです。
const array = ['test','code','hoge'];
array.map((item,index,array)=>{
return index>0 ? console.log(item,array[index-1]) : console.log(item);
})
上の例を実行すると
"test"
"code" "test"
"hoge" "code"
と出力されます。
import {jsx,css} from '@emotion/core';
emotion11で破壊的変更が入ったのでimportするライブラリ名を以下の通りに変更します
import {jsx,css} from '@emotion/react'
tsconfig.jsonのcompilerOptionsでtypesを追加
"jsx": "react-jsx",
"types": ["@emotion/react/types/css-prop"],
またファイルの冒頭に以下のコメントアウトを入れます。GitHubに書いてありました。
/** @jsxRuntime classic */
/** @jsx jsx */
NetlifyのBuild&DeployからEnviromentの項目で変数を設定できます。NODE_ENVなどを設定して本番と開発環境を分けるのに便利です。
vscode-styled-componentsをインストールします。VS Codeのエクステンショの追加タブから追加できます。
インストールされると以下のようにCSS-in-JSのコードが表示されます。
Hasura側でカラムを増やした場合、HasuraのGraphiQLからはGraphQLリクエストが正しく実行できるが、Permissionの設定をしないとフロント側からGraphQLリクエストしても当該カラムが存在しないことになって表示されない。
Auth0のAllowed Web Originsのドメイン名の末尾に/がついていると、レスポンスが異常に遅くなる。
チャットなど変更のリアルタイム監視をする場合はWebSocketLinkとsubscriptionを使う。
subscritpionしているものをmutationする際にキャッシュ操作をすると出る。そもそもキャッシュ操作をしなくても良さそう?
Routeの設定で /callbackと / に対して明示的にコンポーネントを指定する。
insert先のカラムと送信している値の型が違うとこのエラーが出る。
私の場合、あるテーブルのidがINT型 owner_idがTEXT型のときに、誤ってidとauth0のText型 のidを照合していたため出ました。
hasura側のDATAのPermissionでInsertの権限を確認する
matchの値が取得できない時は、withRouterが遷移先のページに設定されているかを確認する。
フロントエンド側だけでエラーが発生する場合、だいたいhasura側のDATAのPermissionに問題がある場合が多いです。
package.jsonにhomepageオプションを追加します。/sub-directory/となっているところを任意のディレクトリ名にすればOKです。
・・・"private": true,
"homepage": "/sub-directory/",
"dependencies": {・・・
&::placeholoder
でplaceholderのスタイルを指定できます。
const inputStyle = css`
&::placeholder{
font-family: serif;
}`
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
publicディレクトリのindex.html中の以下の場所にcrossoriginの設定を追加すると出なくなりました。
<link rel="manifest" crossorigin="use-credentials" href="%PUBLIC_URL%/manifest.json" />
CSS-in-JSのライブラリEmotionでエラーが出る場合に確認すべき点をメモしておきます
/** @jsx jsx */
を忘れていませんか?
creat-react-appでEmotionとTypeScriptを後から導入した場合にエラー( jsx is not defined )が出る場合があります。
jsx;
を各種importの下に追加して明示的に配置することで解決する場合があります。
詳細はこちらの記事にも書いています。