complete API and WEB intergated

@@ -10,11 +10,12 @@
     "start": "next start"
   },
   "dependencies": {
-    "@graphql-community/shared": "1.0.0",
     "@apollo/client": "^3.1.3",
+    "@graphql-community/shared": "1.0.0",
     "@graphql-tools/load-files": "6.0.18",
     "@graphql-tools/merge": "6.0.18",
     "@graphql-tools/schema": "6.0.18",
+    "antd": "^4.16.0",
     "apollo-server-micro": "^2.16.1",
     "graphql": "15.3.0",
     "next": "latest",

 import { AppProps } from "next/app";
 import { ApolloProvider } from "@apollo/client";
 import { useApollo } from "../lib/apollo";
+import "antd/dist/antd.css";
 
 export default function App({ Component, pageProps }: AppProps) {
   const apolloClient = useApollo(pageProps);

 import { GetPostInput, Post } from "@graphql-community/shared";
 import { useQuery, gql } from "@apollo/client";
+import { message } from "antd";
 
 const GET_SOME_POST_QUERY = gql`
   query GetSomePosts($getSomePostInput: GetPostInput!) {
@@ -25,7 +26,7 @@ const Index = () => {
 
   return (
     <>
-      <div>index </div>
+      <div onClick={() => message.success("hi")}>index </div>
       <div>{data?.getSomePosts[0].author}</div>
       <div>{data?.getSomePosts[0].category}</div>
     </>