Added Apollo Client

app/(api)/api/route.js

@@ -1,6 +1,5 @@
 import { ApolloServer } from '@apollo/server';
 import { startServerAndCreateNextHandler } from '@as-integrations/next';
-// import { NextRequest } from 'next/server';
 
 import typeDefs from './_typeDefs/index';
 import resolvers from './_resolvers/index';

app/(pages)/(index-page)/_components/test/test.tsx

@@ -0,0 +1,37 @@
+import { getClient } from '@lib/ApolloClient';
+import { gql } from '@apollo/client';
+
+// const query = gql`
+//   query GetPlaylists {
+//     playlist {
+
+//     }
+//   }
+// `;
+
+const query = gql`
+  query UserQuery($ids: [ID]!) {
+    users(ids: $ids) {
+      name
+    }
+  }
+`;
+
+export default async function Page() {
+  const { data } = await getClient().query({
+    query,
+    variables: {
+      ids: [
+        '7bae85c0-7862-4d8e-b991-41c73d51936d',
+        '9e327de1-38f1-4324-9427-48ec9a670ca3',
+        '47ca283a-2178-4760-814f-7f847f580af3',
+      ],
+    },
+  });
+  return (
+    <div>
+      <h1>Playlists</h1>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+    </div>
+  );
+}

app/(pages)/(index-page)/page.tsx

@@ -1,9 +1,11 @@
 import Hero from './_components/Hero/Hero';
+import Page from './_components/test/test';
 
 export default function Home() {
   return (
     <main>
       <Hero />
+      <Page />
     </main>
   );
 }

lib/ApolloClient.ts

@@ -0,0 +1,34 @@
+import { HttpLink } from '@apollo/client';
+import {
+  registerApolloClient,
+  ApolloClient,
+  InMemoryCache,
+} from '@apollo/experimental-nextjs-app-support';
+
+const getBaseUrl = () => {
+  // In the browser, use relative URLs
+  if (typeof window !== 'undefined') return '';
+
+  // Deployment
+  if (process.env.VERCEL_URL) {
+    return `https://${process.env.VERCEL_URL}`;
+  }
+
+  // Custom Domain
+  if (process.env.NEXT_PUBLIC_SITE_URL) {
+    return process.env.NEXT_PUBLIC_SITE_URL;
+  }
+
+  // Local
+  return 'http://localhost:3000';
+};
+
+export const { getClient } = registerApolloClient(() => {
+  return new ApolloClient({
+    cache: new InMemoryCache(),
+    link: new HttpLink({
+      uri: `${getBaseUrl()}/api`,
+      credentials: 'same-origin',
+    }),
+  });
+});