概要Next.js/TypeScriptのプロジェクトから、GitHubのGraphQL APIにアクセスする方法を簡単にメモします。Next.jsのapiルートからGraphQL Yogaとgraphql-requestを用い方法になります。詳細は以下を参照。GraphQL APIGraphQL YogaAPI routes with GraphQL servergraphql-requestGraphQLのエクスプローラhttps://docs.github.com/ja/graphql/overview/explorer にて、GitHubアカウントでサインインした上で、次のクエリを入力します。query { viewer { login } }これで次の結果が得られます。{ "data": { "viewer": { "login": "pitang1965" } } }今回は次のクエリを用います。query MyQuery { viewer { name repositories(last: 5) { nodes { name description } } } }このクエリを実行すると先ほどの結果に加えて、5つのリポジトリの名前と説明が出力されます。インストールnpm i @graphql-yoga/node graphql graphql-request 又は yarn add @graphql-yoga/node graphql graphql-request 又は pnpm i @graphql-yoga/node graphql graphql-request環境変数の設定GitHub APIのトークンは、GitHubのサイトのSettings → Developer settings → Personal access tokensから取得できます。// .env.local GITHUB_BEARER_TOKEN=xxxxsrc/pages/api/github.tsNext.jsのapiルートからgraphql-requestを用いてGitHub GraphQL APIにアクセスし、その結果をGraphQLサーバーであるGraphQL Yogaを使って/api/github として提供します。import { GraphQLClient, gql } from 'graphql-request'; import { createServer } from '@graphql-yoga/node'; // GitHubからデータを取得 const resolvers = { Query: { async repositories() { const githubEndPoint = 'https://api.github.com/graphql'; const query = gql` { viewer { name repositories(last: 5) { nodes { name description } } } } `; const graphQLClient = new GraphQLClient(githubEndPoint, { headers: { authorization: `Bearer ${process.env.GITHUB_BEARER_TOKEN}`, }, }); const data = await graphQLClient.request(query); // console.log(JSON.stringify(data.viewer.repositories.nodes, undefined, 2)); return data.viewer.repositories.nodes; }, }, }; // APIとして値を返す const typeDefs = /* GraphQL */ ` type Query { repositories: [Repository!]! } type Repository { name: String description: String } `; const server = createServer({ schema: { typeDefs, resolvers, }, endpoint: '/api/github', // graphiql: false // uncomment to disable GraphiQL }); export default server;クライアント側のコード以下はuseSWRを用いて、/api/githubにアクセスし、5つのリポジトリの名前と説明を表示するコードです。import useSWR from 'swr'; const fetcher = (query: string) => fetch('/api/github', { method: 'POST', headers: { 'Content-type': 'application/json', }, body: JSON.stringify({ query }), }) .then((res) => res.json()) .then((json) => json.data); export default function Index() { const { data, error } = useSWR( `{ repositories { name description } } `, fetcher ); console.log(data); if (error) return <div>Failed to load</div>; if (!data) return <div>Loading...</div>; const { repositories } = data; return ( <div> {repositories.map((repository: any, i: number) => ( <div key={i}> <h1>{repository.name}</h1> <p>{repository.description}</p> </div> ))} </div> ); }出力イメージは次です。pitang-todo Vite + React + TypeScipt + Supabase による簡単なtodoアプリ gudid-search openFDAを用いて企業名からUDI（機器固有識別子）の一覧を得て表で表示。 git_training next-portfolio 各種APIを用いた自己紹介サイト qin-team-dev qinサロンチーム開発

Next.jsのapiルートで作ったAPIを、StackBlitz等の他のドメインから使用しようとしたときに、次のようなエラーが出ました。Access to fetch at 'https://pitang1965-next-portfolio.vercel.app//api/tweet' from origin 'https://vitejs-vite-hxwvfs--5173.local.webcontainer.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.これを修正するには、APIのほうをなんとかしないといけないようです。次でできました。インストールnextjs-corsをインストールします。$ npm install nextjs-cors 又は $ yarn add nextjs-cors 又は $ pnpm install nextjs-corsapiルートのコード変更: import NextCors from 'nextjs-cors';　　　<-- ★追加 export default async function twitter ( req: NextApiRequest, res: NextApiResponse ) { await NextCors(req, res, {　　　<-- ★追加 methods: ['GET'], origin: '*', optionSuccessStatus: 200, }); :

概要Next.js では何も設定せずにコンポーネントレベルでCSSを使用できる CSS Modules が使用できます。つまり、コンポーネント間でのクラス名の重複など気にしないことができます。Tailwind CSS が気に入らない場合は、候補になりうると思います。使い方は簡単です。ルールxxx.module.css というファイル名を使用する。例：Button.module.css次のように利用する。import styles from './Button.module.css' export function Button() { return ( <button type="button" className={styles.button}　← ★Button.module.css に .button { ... } があること。ただし、次のように複数のクラス名やハイフン付きを指定できません。className={ styles.button styles.button-darkmode }解決方法classnames を使用します。$ npm i classnames 又は $ yarn add classnames 又は $ pnpm i classnames次のようにします。少し変な書き方ですが、ハイフンの問題も解決します。: import cx from 'classnames'; : <Container className={cx(styles.container, styles['mobile-layout'])}

概要オープンソースでFirebaseの代替として人気のあるsupabaseをちょっと試してみました（チュートリアル＋α）。Quickstart: ReactTodo example using Supabase [React]機能として以下があります。データベース (Postgres)認証ストレージエッジファクション個人開発にはとても良さそうです。ただ無料プランだと1週間使わないと停止するそうです（どういうことかよくわかっていない。料金プラン参照）。認証（パスワードレスのマジックリンク）付きでデータベース、プロフィール画像はストレージに保存する次のようなtodoアプリを作成しました。作成したto-doアプリ開発環境の構築には、Vite、React、TypeScriptを採用しました。作成したto-doアプリ続きは、こちらで。

概要作らなくてもReact SVG Spinnersなどを用いて簡単に実装できます。しかし、ここではSVG SpinnersなどからフリーのSVGを拾ってきて組み込む方法をメモします。SVGファイルの取得例えばGitHubなどで次のようなものを見つけた場合は、そのソースコードを取得します。Display the source blobをクリック<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"><animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite"/></path></svg>Loading .tsx以下のコードの<svg>...</svg>の部分に取得したSVGのコードを貼り付けます。そのうえで、// 変更または// 追加のコメントを追加した部分をpropsの値を使うように書き換えています。import { SVGProps } from 'react'; export function Loading({ width = 24, height = 24, color = 'purple', dur = '0.75s', }: SVGProps<SVGElement>):JSX.Element { return ( <svg width={width} // 変更 height={height} // 変更 fill={color} // 追加 viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' > <path d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z' opacity='.25' /> <path d='M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z'> <animateTransform attributeName='transform' type='rotate' dur={dur} // 変更 values='0 12 12;360 12 12' repeatCount='indefinite' /> </path> </svg> ); }使い方レガシーなReactでの方法ですと次です。import { useEffect } from 'react'; import { Loading } from './Loading'; : // 時間のかかる関数 setIsLoading(true); ： setIsLoading(false); return ( ： {isLoading ? <Loading /> : 本来表示するコンポーネント />} ： ); ：次のように変更すれば、色、サイズ、アニメーションの周期を変更できます。<Loading /> ↓ <Loading color={'yellow'} width={48} height={48} dur={'1.5s'} />