Codestin Search App

Hasura

Hasura Cloudで、HTTPヘッダーを付与するメモ

<h2 id="h8909e47bed">Hasura Cloudのprojectsから、該当projectの右上歯車マーククリック</h2> <img src="https://images.microcms-assets.io/assets/f48da51fb8474861bea5ca6dade0c13c/e9e562e1c08c4bd399323e655759cc8a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-08-28%2017.28.45.png" alt=""> <h2 id="h846fd4aff6">Env varsからNew Env Varクリック</h2> <img src="https://images.microcms-assets.io/assets/f48da51fb8474861bea5ca6dade0c13c/173d7838b20b4b3eb263273971ebe379/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-08-28%2017.31.45.png" alt=""> <h2 id="h4b6a1322a8">HASURAGRAPHQLADMIN_SECRETのValueを登録</h2> <img src="https://images.microcms-assets.io/assets/f48da51fb8474861bea5ca6dade0c13c/a5eaaf8b727242f0bd6e103dcbcc8300/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-08-28%2017.35.29.png" alt=""> これだけで、x-hasura-admin-secretが追加されるので、次回のリクエストから、 このheader情報を付与する必要があります。 <img src="https://images.microcms-assets.io/assets/f48da51fb8474861bea5ca6dade0c13c/1783e05cb7a14204b3db277b47ad4285/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-08-28%2017.36.28.png" alt=""> <h2 id="h1b3377c92c">.env作成</h2>HASURAGRAPHQLADMIN_SECRETと同じものを入力 .env.local<pre><code>NEXT_PUBLIC_HASURA_ADMIN=*****</code></pre> <h2 id="h7ac1f7b5ea">ApolloClientにheaders追加</h2><pre><code>const createApolloClient = () => {   return new ApolloClient({     ssrMode: typeof window === 'undefined',     link: new HttpLink({       uri: 'https://basic-hasura-lesson00.hasura.app/v1/graphql',       headers: {         'x-hasura-admin-secret': process.env.NEXT_PUBLIC_HASURA_ADMIN       }     }),     cache: new InMemoryCache(),   }) }</code></pre> こんな感じでOKでした。

WordPress

undefined/undefined/undefined

フォームからお問い合わせがあった際に、自動投稿する方法

wordpressのサイトで、お見積りのお問い合わせがあった場合、その内容を自動投稿する方法を調べました。 参考はこちら <a href="https://www.will3in.co.jp/frontend-blog/article/create-post-and-reflect-acf-group-field-from-contactform7/" target="_blank" rel="noopener noreferrer">https://www.will3in.co.jp/frontend-blog/article/create-post-and-reflect-acf-group-field-from-contactform7/</a> <h2 id="h00b8af9eb7">仕様</h2><ul><li>wordpress</li><li>contactform7(フォーム2種類設置)</li><li>acfでカスタムフィールド設定</li><li>カスタム投稿タイプ</li><li>カスタムタクソノミ</li></ul> <pre><code>// フォーム送信完了後実行 add_action('wpcf7_mail_sent', 'wpcf7_insert_post');</code></pre>cf7にwpcf7mailsentというアクションフックがあるのでこれを利用します。 これで、フォームの送信が完了した後に、wpcf7_insert_post関数を実行できます。 wpcf7insertpost関数を作成します。<pre><code>function wpcf7_insert_post($contact_form){      // 送信元のform id取得   $form_id = $contact_form->id(); // 特定のフォームからのみ実行   if($form_id == "2189"){     // おまじない     $submission = WPCF7_Submission::get_instance();     if($submission){       // フォーム内容取得       $form_data = $submission->get_posted_data();          // 投稿内容セット       $new_post = array(         "post_type"=>'item', //カスタム投稿タイプ指定         'post_title' => $form_data['your-type'], //記事タイトル設定         'post_content' => $form_data['your-textarea'], //記事内容設定         'post_status' => 'publish', //記事を公開状態に       );          // 新規投稿、投稿ID取得       $post_id = wp_insert_post($new_post);          // タームにチェック       wp_set_object_terms($post_id, $form_data['your-type'], 'genre');          // カスタムフィールド追加       if(!is_wp_error($post_id)){         add_post_meta($post_id, 'price', $form_data['your-textarea']);         add_post_meta($post_id, 'publish', $form_id);       }     }   } }</code></pre> これでお問い合わせがあった際、必要な項目を抜き出して、自動投稿することができます。

コーディング

undefined/undefined/undefined

next.js .env.localについて

Next.jsバージョン9.4以降から、環境変数の取り扱いが変更になっているようです。 サーバー側でに渡す環境変数は、.env.localで設定すれば良くて、 クライアント側からアクセスしたい環境変数は、.env.localに記載後、 next.config.jsで再度、設定するといい .env.local<pre><code>API_KEY=XXXXXXXX END_POINT=XXXXXXX SLACK_WEBHOOK_URL=XXXXXXXXX</code></pre> next.config.js<pre><code>module.exports = {    env：{      SLACK_WEBHOOK_URL:process.env.SLACK_WEBHOOK_URL   } };</code></pre> あれ、これでもconsoleから見えちゃう。。。

コーディング

undefined/undefined/undefined

firebase cloud functions　無料プランについて

firebaseの無料プランで学習用にcloud functionの設定をしている際、<pre><code>firebase deploy</code></pre>すると、<pre><code>Error: Cloud Functions deployment requires the pay-as-you-go (Blaze) billing plan. To upgrade your project, visit the following URL:</code></pre> と有料プランにしないと、使えないよと言われます。 対策としては、 functionsフォルダのpackage.jsonの下記部分を<pre><code> "engines": {   "node": "10"  },</code></pre> <pre><code> "engines": {  "node": "8"  },</code></pre> に変更することで、2021-03-15までは使えるようです。

コーディング

undefined/undefined/undefined

クロージャについて

<h1 id="h5c469d82e8">・クロージャー</h1>定義・・・レキシカルスコープの変数を関数が使用している状態 <h3 id="h20feb2cff2">ケース01・・・プライベート変数の定義</h3>グローバルに定義するとどこからでも参照できるため、関数スコープ内に変数を定義 ・グローバルに定義<pre><code>let num = 0 console.log("Global", num); increment() increment() increment() function increment() {     num = num + 1     console.log(num); }</code></pre> ・クロージャー使用<pre><code>function incrementFactory() {     let num = 0     function increment() {         num = num + 1         console.log(num);     }     return increment } const increment = incrementFactory() increment() increment() increment()</code></pre> <h3 id="hab1d653a0d">ケース02・・・動的関数</h3><pre><code>function addNumberFactory(num) {     function addNumber(value) {         return num + value;     }     return addNumber; } const add5 = addNumberFactory(5); const result = add5(5); const result = add5(10);</code></pre> 変数numを固定した関数を生成できます

Hasura Cloudで、HTTPヘッダーを付与するメモ

フォームからお問い合わせがあった際に、自動投稿する方法

next.js .env.localについて

firebase cloud functions 無料プランについて

クロージャについて

firebase cloud functions　無料プランについて