人口構成一覧APIの繋ぎ込み (#31)

* swrインストール

* API疎通

* フォルダ整理

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",

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);
 }

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 <p>{`${populationData?.message}`}</p>;
 };

src/hooks/api/fetcher.ts

@@ -0,0 +1,2 @@
+export const fetcher = (url: string) =>
+  fetch(`/api${url}`).then((res) => res.json());

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<GetPopulationResponse>(
+      prefCode ? `/population/composition/perYear?${urlSearchParam}` : null,
+      fetcher,
+    );
+
+  return { populationData, mutatePopulation };
+};

src/interfaces/population.ts

@@ -1,4 +1,4 @@
-export interface GetPerYearResponse {
+export interface GetPopulationResponse {
   message: null;
   result: {
     boundaryYear: number;

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"