🍱

Remix + Serverless + Supabase + apolloの例

2022/03/19に公開

Lambda

概要:

Remix + Serverless framework の例で、Supabase（postgreSQL）操作する例となります。

今回はフロント部分のみの記事です。
テストは、vercel hobbyデプロイしました。
テストする場合、lambdaは無料枠はありますが。基本有料なので。ご注意下さい

構成

Remix : 1.3.1
Serverless framework
aws lambda
apollo-client
supabase / postgreSQL
node 14

参考のコード

https://github.com/kuc-arc-f/remix33

remixコード

app/routes/test.tsx

LoaderFunctionで、GraphQLで読込
client.mutate で、postgres追加

test.tsx

//import { useEffect, useRef } from "react";
import type { MetaFunction, LoaderFunction } from "remix";
import { useLoaderData, Link } from "remix";
import { Form, json, useActionData, redirect } from "remix";
import { gql } from "@apollo/client";
import client from '../../apollo-client'

export let meta: MetaFunction = () => {
  return {
    title: "test | Remix Starter",
    description: "Welcome to remix!"
  };
};
export let loader: LoaderFunction = async () => {
  const data = await client.query({
    query: gql`
    query {
      tasks {
        id
        title
        created_at
      }
    }
    `,
    fetchPolicy: "network-only"
  });
console.log(data.data.tasks); 
  return json(data.data.tasks);
}


export default function Page() {
  //let data = useActionData();
  let data: any[] = useLoaderData<any>();
  console.log(data);

  let onClick = async function(){
    try{
      console.log("#onClick");
      const title = document.querySelector<HTMLInputElement>('#title');
      console.log(title.value);
      const result = await client.mutate({
        mutation:gql`
        mutation {
          addTask(title: "${title.value}"){
            id
          }
        }            
      `
      });
  console.log(result);      
    } catch (e) {
      console.error(e);
      alert('Error , add task');
    }    
  }
  
  return (
    <div className="remix__page">
      <main>
        <h2>Test</h2>
        <hr />
        <p>welcome, about</p>
        <hr />
        add:<br />
        <label>
          <div>Title:</div>
          <input type="text" name="title" id="title" />
        </label>        
        <button onClick={() => onClick()}>Add</button>
        <hr />
        <ul>
        {data.map(item => (
          <li key={item.id} className="remix__page__resource">
            {item.title}
            <Link to={item.id}>[ Show ]</Link>
            <Link to={`edit/${item.id}`}>[ edit ]</Link>
          </li>
        ))}
        </ul>        
      </main>
    </div>
  );
}

....

Remix + Serverless + Supabase + apolloの例

概要:

構成

参考のコード

関連の記事

remixコード

Discussion