From 8844c3b7aeca6f6d82e813f237c10991afbdb45a Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Sun, 4 Jun 2023 15:31:19 +1000
Subject: [PATCH] Try to implement graphql

---
 package.json                            |  1 +
 src/app/services/pokeGraphqlApi.test.ts |  1 +
 src/app/services/pokeGraphqlApi.ts      | 37 +++++++++++++++++++++++++
 yarn.lock                               | 22 ++++++++++++++-
 4 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 src/app/services/pokeGraphqlApi.test.ts
 create mode 100644 src/app/services/pokeGraphqlApi.ts

diff --git a/package.json b/package.json
index 753f2f7..8f93186 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "@mui/material": "^5.13.1",
     "@reduxjs/toolkit": "^1.9.5",
     "framer-motion": "^10.12.12",
+    "graphql-request": "^6.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-lazy-load-image-component": "^1.5.6",
diff --git a/src/app/services/pokeGraphqlApi.test.ts b/src/app/services/pokeGraphqlApi.test.ts
new file mode 100644
index 0000000..7cd8658
--- /dev/null
+++ b/src/app/services/pokeGraphqlApi.test.ts
@@ -0,0 +1 @@
+import { AppStore } from 'app/store';
diff --git a/src/app/services/pokeGraphqlApi.ts b/src/app/services/pokeGraphqlApi.ts
new file mode 100644
index 0000000..d89bc8d
--- /dev/null
+++ b/src/app/services/pokeGraphqlApi.ts
@@ -0,0 +1,37 @@
+import { createApi } from '@reduxjs/toolkit/query';
+import { request, gql, ClientError } from 'graphql-request';
+
+const graphqlBaseQuery =
+  ({ baseUrl }: { baseUrl: string }) =>
+  async ({ body }: { body: string }) => {
+    try {
+      const result = await request(baseUrl, body);
+      return { data: result };
+    } catch (error) {
+      if (error instanceof ClientError) {
+        return { error: { status: error.response.status, data: error } };
+      }
+      return { error: { status: 500, data: error } };
+    }
+  };
+
+export const pokeGraphqlApi = createApi({
+  baseQuery: graphqlBaseQuery({
+    baseUrl: 'https://beta.pokeapi.co/graphql/v1beta',
+  }),
+  endpoints: builder => ({
+    getRegionList: builder.query({
+      query: () => ({
+        body: gql`
+          query {
+            pokemon_v2_region {
+              id
+              name
+            }
+          }
+        `,
+      }),
+      transformResponse: response => response.pokemon_v2_region.data,
+    }),
+  }),
+});
diff --git a/yarn.lock b/yarn.lock
index 7229a0f..8c515e4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1833,6 +1833,11 @@
   resolved "https://registry.yarnpkg.com/@fal-works/esbuild-plugin-global-externals/-/esbuild-plugin-global-externals-2.1.2.tgz#c05ed35ad82df8e6ac616c68b92c2282bd083ba4"
   integrity sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==
 
+"@graphql-typed-document-node/core@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861"
+  integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==
+
 "@humanwhocodes/config-array@^0.11.8":
   version "0.11.8"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9"
@@ -5997,6 +6002,13 @@ cosmiconfig@^7.0.0, cosmiconfig@^7.0.1:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+cross-fetch@^3.1.5:
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.6.tgz#bae05aa31a4da760969756318feeee6e70f15d6c"
+  integrity sha512-riRvo06crlE8HiqOwIpQhxwdOk4fOeR7FVM/wXoxchFEqMNUjvbs3bfo4OTgMEMHzppd4DxFBDbyySj8Cv781g==
+  dependencies:
+    node-fetch "^2.6.11"
+
 cross-spawn@7.0.3, cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -7999,6 +8011,14 @@ graphemer@^1.4.0:
   resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
+graphql-request@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/graphql-request/-/graphql-request-6.1.0.tgz#f4eb2107967af3c7a5907eb3131c671eac89be4f"
+  integrity sha512-p+XPfS4q7aIpKVcgmnZKhMNqhltk20hfXtkaIkTfjjmiKMJ5xrt5c743cL03y/K7y1rg3WrIC49xGiEQ4mxdNw==
+  dependencies:
+    "@graphql-typed-document-node/core" "^3.2.0"
+    cross-fetch "^3.1.5"
+
 "graphql@^15.0.0 || ^16.0.0":
   version "16.6.0"
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.6.0.tgz#c2dcffa4649db149f6282af726c8c83f1c7c5fdb"
@@ -10260,7 +10280,7 @@ node-fetch-native@^1.0.2:
   resolved "https://registry.yarnpkg.com/node-fetch-native/-/node-fetch-native-1.1.1.tgz#b8977dd7fe6c5599e417301ed3987bca787d3d6f"
   integrity sha512-9VvspTSUp2Sxbl+9vbZTlFGq9lHwE8GDVVekxx6YsNd1YH59sb3Ba8v3Y3cD8PkLNcileGGcA21PFjVl0jzDaw==
 
-node-fetch@^2.6.1:
+node-fetch@^2.6.1, node-fetch@^2.6.11:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.11.tgz#cde7fc71deef3131ef80a738919f999e6edfff25"
   integrity sha512-4I6pdBY1EthSqDmJkiNk3JIT8cswwR9nfeW/cPdUagJYEQG7R95WRH74wpz7ma8Gh/9dI9FP+OU+0E4FvtA55w==