Added graphql

src/App.tsx

@@ -1,9 +0,0 @@
-function App() {
-  return (
-    <div className="App">
-      <p className="text-3xl font-bold underline">Some text</p>
-    </div>
-  )
-}
-
-export default App

src/lib/graphql/apollo.ts

@@ -0,0 +1,59 @@
+import { IncomingMessage, ServerResponse } from 'http'
+import { useMemo } from 'react'
+import {
+  ApolloClient,
+  InMemoryCache,
+  NormalizedCacheObject,
+} from '@apollo/client'
+
+let apolloClient: ApolloClient<NormalizedCacheObject> | undefined
+
+export type ResolverContext = {
+  req?: IncomingMessage
+  res?: ServerResponse
+}
+
+function createIsomorphLink(_: ResolverContext = {}) {
+  if (typeof window === 'undefined') {
+  } else {
+    const { HttpLink } = require('@apollo/client')
+    return new HttpLink({
+      uri: 'http://127.0.0.1:3001/',
+      credentials: 'same-origin',
+    })
+  }
+}
+
+function createApolloClient(context?: ResolverContext) {
+  return new ApolloClient({
+    ssrMode: typeof window === 'undefined',
+    link: createIsomorphLink(context),
+    cache: new InMemoryCache(),
+  })
+}
+
+export function initializeApollo(
+  initialState: any = null,
+  // Pages with Next.js data fetching methods, like `getStaticProps`, can send
+  // a custom context which will be used by `SchemaLink` to server render pages
+  context?: ResolverContext
+) {
+  const _apolloClient = apolloClient ?? createApolloClient(context)
+
+  // If your page has Next.js data fetching methods that use Apollo Client, the initial state
+  // get hydrated here
+  if (initialState) {
+    _apolloClient.cache.restore(initialState)
+  }
+  // For SSG and SSR always create a new Apollo Client
+  if (typeof window === 'undefined') return _apolloClient
+  // Create the Apollo Client once in the client
+  if (!apolloClient) apolloClient = _apolloClient
+
+  return _apolloClient
+}
+
+export function useApollo(initialState: any) {
+  const store = useMemo(() => initializeApollo(initialState), [initialState])
+  return store
+}

src/lib/graphql/documents/getUpcoming.graphql

@@ -0,0 +1,5 @@
+query GetUpcoming {
+  getUpcoming {
+    name
+  }
+}

src/lib/graphql/generated.ts

@@ -0,0 +1,80 @@
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+export type Maybe<T> = T | null;
+export type InputMaybe<T> = Maybe<T>;
+export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
+const defaultOptions = {} as const;
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+  ID: string;
+  String: string;
+  Boolean: boolean;
+  Int: number;
+  Float: number;
+};
+
+export type Event = {
+  __typename?: 'Event';
+  date: EventDate;
+  description?: Maybe<Array<Scalars['String']>>;
+  id: Scalars['String'];
+  location?: Maybe<Scalars['String']>;
+  name: Scalars['String'];
+};
+
+export type EventDate = {
+  __typename?: 'EventDate';
+  day: Scalars['Int'];
+  hour: Scalars['Int'];
+  minute: Scalars['Int'];
+  month: Scalars['Int'];
+  year: Scalars['Int'];
+};
+
+export type QueryRoot = {
+  __typename?: 'QueryRoot';
+  getUpcoming: Array<Event>;
+};
+
+export type GetUpcomingQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetUpcomingQuery = { __typename?: 'QueryRoot', getUpcoming: Array<{ __typename?: 'Event', name: string }> };
+
+
+export const GetUpcomingDocument = gql`
+    query GetUpcoming {
+  getUpcoming {
+    name
+  }
+}
+    `;
+
+/**
+ * __useGetUpcomingQuery__
+ *
+ * To run a query within a React component, call `useGetUpcomingQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetUpcomingQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetUpcomingQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useGetUpcomingQuery(baseOptions?: Apollo.QueryHookOptions<GetUpcomingQuery, GetUpcomingQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetUpcomingQuery, GetUpcomingQueryVariables>(GetUpcomingDocument, options);
+      }
+export function useGetUpcomingLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetUpcomingQuery, GetUpcomingQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetUpcomingQuery, GetUpcomingQueryVariables>(GetUpcomingDocument, options);
+        }
+export type GetUpcomingQueryHookResult = ReturnType<typeof useGetUpcomingQuery>;
+export type GetUpcomingLazyQueryHookResult = ReturnType<typeof useGetUpcomingLazyQuery>;
+export type GetUpcomingQueryResult = Apollo.QueryResult<GetUpcomingQuery, GetUpcomingQueryVariables>;

src/main.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import "./root.css"
-
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-)

src/pages/_app.tsx

@@ -0,0 +1,12 @@
+import '../styles/globals.css'
+import type { AppProps } from 'next/app'
+import { useApollo } from '../lib/graphql/apollo'
+import { ApolloProvider } from '@apollo/client'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  const apolloClient = useApollo(pageProps.initialApolloState)
+
+  return <ApolloProvider client={apolloClient}><Component {...pageProps} /></ApolloProvider>
+}
+
+export default MyApp

src/pages/index.tsx

@@ -0,0 +1,95 @@
+import type { NextPage } from 'next'
+import Head from 'next/head'
+import Image from 'next/image'
+import { useGetUpcomingQuery } from '../lib/graphql/generated'
+
+const Home: NextPage = () => {
+  const { data } = useGetUpcomingQuery()
+
+  console.log(data)
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center py-2">
+      <Head>
+        <title>Create Next App</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className="flex w-full flex-1 flex-col items-center justify-center px-20 text-center">
+        <h1 className="text-6xl font-bold">
+          Welcome to{' '}
+          <a className="text-blue-600" href="https://nextjs.org">
+            Next.js!
+          </a>
+        </h1>
+
+        <p className="mt-3 text-2xl">
+          Get started by editing{' '}
+          <code className="rounded-md bg-gray-100 p-3 font-mono text-lg">
+            pages/index.tsx
+          </code>
+        </p>
+
+        <div className="mt-6 flex max-w-4xl flex-wrap items-center justify-around sm:w-full">
+          <a
+            href="https://nextjs.org/docs"
+            className="mt-6 w-96 rounded-xl border p-6 text-left hover:text-blue-600 focus:text-blue-600"
+          >
+            <h3 className="text-2xl font-bold">Documentation &rarr;</h3>
+            <p className="mt-4 text-xl">
+              Find in-depth information about Next.js features and its API.
+            </p>
+          </a>
+
+          <a
+            href="https://nextjs.org/learn"
+            className="mt-6 w-96 rounded-xl border p-6 text-left hover:text-blue-600 focus:text-blue-600"
+          >
+            <h3 className="text-2xl font-bold">Learn &rarr;</h3>
+            <p className="mt-4 text-xl">
+              Learn about Next.js in an interactive course with quizzes!
+            </p>
+          </a>
+
+          <a
+            href="https://github.com/vercel/next.js/tree/canary/examples"
+            className="mt-6 w-96 rounded-xl border p-6 text-left hover:text-blue-600 focus:text-blue-600"
+          >
+            <h3 className="text-2xl font-bold">Examples &rarr;</h3>
+            <p className="mt-4 text-xl">
+              Discover and deploy boilerplate example Next.js projects.
+            </p>
+          </a>
+
+          <a
+            href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            className="mt-6 w-96 rounded-xl border p-6 text-left hover:text-blue-600 focus:text-blue-600"
+          >
+            <h3 className="text-2xl font-bold">Deploy &rarr;</h3>
+            <p className="mt-4 text-xl">
+              Instantly deploy your Next.js site to a public URL with Vercel.
+            </p>
+          </a>
+        </div>
+      </main>
+
+      <footer className="flex h-24 w-full items-center justify-center border-t">
+        <a
+          className="flex items-center justify-center gap-2"
+          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Powered by{' '}
+          <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
+        </a>
+      </footer>
+    </div>
+  )
+}
+
+export default Home
+function GetUpcomingDocument(GetUpcomingDocument: any): { data: any } {
+  throw new Error('Function not implemented.')
+}
+

src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />