From 2f154f8a7895f71d86bc387e2d9ee7bf13085326 Mon Sep 17 00:00:00 2001 From: Furuzono Makoto Date: Sun, 22 Oct 2023 22:57:30 +0900 Subject: [PATCH] =?UTF-8?q?=E4=BA=BA=E5=8F=A3=E6=A7=8B=E6=88=90=E4=B8=80?= =?UTF-8?q?=E8=A6=A7API=E3=81=AE=E7=B9=8B=E3=81=8E=E8=BE=BC=E3=81=BF=20(#3?= =?UTF-8?q?1)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * swrインストール * API疎通 * フォルダ整理 --- package.json | 3 ++- .../population/composition/perYear/route.ts | 4 ++-- src/components/Graph.tsx | 13 +++++++++++- src/hooks/api/fetcher.ts | 2 ++ src/hooks/api/usePopulation.ts | 21 +++++++++++++++++++ src/interfaces/population.ts | 2 +- yarn.lock | 15 ++++++++++++- 7 files changed, 54 insertions(+), 6 deletions(-) create mode 100644 src/hooks/api/fetcher.ts create mode 100644 src/hooks/api/usePopulation.ts diff --git a/package.json b/package.json index dab82d2..618e544 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,8 @@ "next": "13.5.6", "react": "^18", "react-dom": "^18", - "reset-css": "^5.0.2" + "reset-css": "^5.0.2", + "swr": "^2.2.4" }, "devDependencies": { "@types/node": "^20", diff --git a/src/app/api/population/composition/perYear/route.ts b/src/app/api/population/composition/perYear/route.ts index 647fafe..317ee56 100644 --- a/src/app/api/population/composition/perYear/route.ts +++ b/src/app/api/population/composition/perYear/route.ts @@ -1,7 +1,7 @@ import { RESAS_API_KEY } from '@/env'; import { RESAS_API_URL } from '@/constants'; import { NextResponse } from 'next/server'; -import type { GetPerYearResponse } from '@/interfaces/population'; +import type { GetPopulationResponse } from '@/interfaces/population'; export async function GET(request: Request) { const { searchParams } = new URL(request.url); @@ -17,7 +17,7 @@ export async function GET(request: Request) { }, }, ); - const data = (await res.json()) as GetPerYearResponse; + const data = (await res.json()) as GetPopulationResponse; return NextResponse.json(data); } diff --git a/src/components/Graph.tsx b/src/components/Graph.tsx index 7ab5b22..02085a7 100644 --- a/src/components/Graph.tsx +++ b/src/components/Graph.tsx @@ -1,3 +1,14 @@ +'use client'; +import { usePopulation } from '@/hooks/api/usePopulation'; +import { throwError } from '@/lib/throwError'; +import { useEffect } from 'react'; + export const Graph = () => { - return <>; + const { populationData, mutatePopulation } = usePopulation({ prefCode: 11 }); + + useEffect(() => { + mutatePopulation().catch((e) => throwError(e)); + }, [mutatePopulation]); + + return

{`${populationData?.message}`}

; }; diff --git a/src/hooks/api/fetcher.ts b/src/hooks/api/fetcher.ts new file mode 100644 index 0000000..706b652 --- /dev/null +++ b/src/hooks/api/fetcher.ts @@ -0,0 +1,2 @@ +export const fetcher = (url: string) => + fetch(`/api${url}`).then((res) => res.json()); diff --git a/src/hooks/api/usePopulation.ts b/src/hooks/api/usePopulation.ts new file mode 100644 index 0000000..0890642 --- /dev/null +++ b/src/hooks/api/usePopulation.ts @@ -0,0 +1,21 @@ +import { fetcher } from './fetcher'; +import useSWR from 'swr'; +import type { GetPopulationResponse } from '@/interfaces/population'; + +interface Props { + prefCode: number | undefined; +} + +export const usePopulation = ({ prefCode }: Props) => { + const urlSearchParam = new URLSearchParams({ + prefCode: prefCode?.toString() || '', + }).toString(); + + const { data: populationData, mutate: mutatePopulation } = + useSWR( + prefCode ? `/population/composition/perYear?${urlSearchParam}` : null, + fetcher, + ); + + return { populationData, mutatePopulation }; +}; diff --git a/src/interfaces/population.ts b/src/interfaces/population.ts index d531b5e..b20a18c 100644 --- a/src/interfaces/population.ts +++ b/src/interfaces/population.ts @@ -1,4 +1,4 @@ -export interface GetPerYearResponse { +export interface GetPopulationResponse { message: null; result: { boundaryYear: number; diff --git a/yarn.lock b/yarn.lock index 9b58852..4668afd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -677,7 +677,7 @@ clean-regexp@^1.0.0: dependencies: escape-string-regexp "^1.0.5" -client-only@0.0.1: +client-only@0.0.1, client-only@^0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1" integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA== @@ -3166,6 +3166,14 @@ svg-tags@^1.0.0: resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764" integrity sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA== +swr@^2.2.4: + version "2.2.4" + resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.4.tgz#03ec4c56019902fbdc904d78544bd7a9a6fa3f07" + integrity sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ== + dependencies: + client-only "^0.0.1" + use-sync-external-store "^1.2.0" + table@^6.8.1: version "6.8.1" resolved "https://registry.yarnpkg.com/table/-/table-6.8.1.tgz#ea2b71359fe03b017a5fbc296204471158080bdf" @@ -3328,6 +3336,11 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.0" +use-sync-external-store@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a" + integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA== + util-deprecate@^1.0.1, util-deprecate@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"