apollo get static props

graphql/schema/user.ts

@@ -49,7 +49,6 @@ export const Query = queryType({
         identifier: stringArg({ required: true }),
       },
       resolve: (_root, { identifier }, ctx) => {
-        console.log({ ctx });
         return ctx.prisma.user.findFirst({
           where: {
             // this is ok because the values are mutually exclusive: customUrlPath can't contain only numbers etc.

lib/apollo.ts

@@ -5,16 +5,11 @@ import {
   InMemoryCache,
   NormalizedCacheObject,
 } from "@apollo/client";
-import { IncomingMessage, ServerResponse } from "http";
+import { Context } from "nexus-plugin-prisma/typegen";
 import { useMemo } from "react";
 
 let apolloClient: ApolloClient<NormalizedCacheObject> | undefined;
 
-export type ResolverContext = {
-  req?: IncomingMessage;
-  res?: ServerResponse;
-};
-
 function createIsomorphLink(context: ResolverContext = {}) {
   if (typeof window === "undefined") {
     const { SchemaLink } = require("@apollo/client/link/schema");
@@ -29,7 +24,7 @@ function createIsomorphLink(context: ResolverContext = {}) {
   }
 }
 
-function createApolloClient(context?: ResolverContext) {
+function createApolloClient(context?: Context) {
   return new ApolloClient({
     ssrMode: typeof window === "undefined",
     link: createIsomorphLink(context),
@@ -41,7 +36,7 @@ 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
+  context?: Context
 ) {
   const _apolloClient = apolloClient ?? createApolloClient(context);
 

package.json

@@ -9,7 +9,7 @@
     "migrate:save": "npx prisma migrate save --name init --experimental",
     "migrate:up": "npx prisma migrate up --experimental",
     "studio": "npx prisma studio",
-    "generate:prisma": "npx prisma generate",
+    "generate": "npx prisma generate",
     "seed": "ts-node prisma/seed.ts",
     "gen": "graphql-codegen --config codegen.yml",
     "prettier": "prettier --write ."

pages/_app.tsx

@@ -5,7 +5,6 @@ import type { AppProps } from "next/app";
 import Layout from "scenes/Layout";
 
 const MyApp = (props: AppProps) => {
-  console.log({ props });
   const apolloClient = useApollo(props.pageProps.initialApolloState);
 
   return (

pages/u/[identifier].tsx

@@ -1,3 +1,4 @@
+import { PrismaClient } from "@prisma/client";
 import {
   GetUserByIdentifierDocument,
   useGetUserByIdentifierQuery,
@@ -14,7 +15,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
 };
 
 export const getStaticProps: GetStaticProps = async ({ params }) => {
-  const apolloClient = initializeApollo();
+  const apolloClient = initializeApollo(null, { prisma: new PrismaClient() });
 
   await apolloClient.query({
     query: GetUserByIdentifierDocument,
@@ -27,13 +28,16 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
   return {
     props: {
       initialApolloState: apolloClient.cache.extract(),
+      identifier: params!.identifier,
     },
     revalidate: 1,
   };
 };
 
-const ProfilePage = () => {
-  const { getUserByIdentifier } = useGetUserByIdentifierQuery().data!;
+const ProfilePage = ({ identifier }: { identifier: string }) => {
+  const { getUserByIdentifier } = useGetUserByIdentifierQuery({
+    variables: { identifier },
+  }).data!;
   return <Profile user={getUserByIdentifier!} />;
 };
 

scenes/Layout/components/IconNavBar.tsx

@@ -118,7 +118,7 @@ const IconNavBar = () => {
               {t(`navigation;${displayName}`)}
             </Box>
             <Image
-              src={`navIcons/${code}.png`}
+              src={`/navIcons/${code}.png`}
               h={12}
               w={12}
               alt={code}