details info query working

Front/src/coinApi.ts

@@ -1,8 +1,11 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
 
+// URL's
 const baseUrl = "http://127.0.0.1:8080";
 const marketsUrl = '/coins/markets';
-const countUrl = '/coins/count';
+const countUrl = '/count';
+const coinInfoUrl = (id:string) => `/coin/${id}`;
+const coinGraphUrl = (id:string) => `/coin/${id}`;
 
 export const coinListApi = createApi({
   baseQuery: fetchBaseQuery({ baseUrl: baseUrl }),
@@ -12,8 +15,17 @@ export const coinListApi = createApi({
     }),
     getCount: builder.query<any, number | void>({
       query: () => countUrl,
-    }),   
+    }),
+    getCoinInfo: builder.query<any, string>({
+      query: (id: string) => coinInfoUrl(id),
+    }),
+    getCoinGraph: builder.query<any, string>({
+      query: (id: string) => coinGraphUrl(id),
+    }), 
   }),
 })
 
-export const { useGetMarketsQuery, useGetCountQuery } = coinListApi;
+export const { 
+  useGetMarketsQuery,
+  useGetCountQuery,
+  useGetCoinInfoQuery } = coinListApi;

Front/src/coinDetails/coinDetails.tsx

@@ -1,10 +1,33 @@
 import { useParams } from 'react-router-dom';
+import { useGetCoinInfoQuery } from '../coinApi';
 
 const CoinDetails = (): JSX.Element => {
     const { id } = useParams();
     console.log("id: ", id)
+
+    const { 
+        data,
+        error,
+        isLoading,
+        isSuccess,
+        refetch 
+    } = useGetCoinInfoQuery(id || 'btc');
+
+    // const { id } = data;
+    
     return (
-        <div>CoinDetails</div>
+        <div>CoinDetails
+            {
+                data  &&
+                <div className="info">
+                    <div>ID: {data.id}</div>
+                    <div className="links">
+                        <div>Homepage: {data.links.homepage}</div>
+                    </div>
+                    <div>Description{data.description.en}</div>
+                </div>
+            }
+        </div>
     )
   }