feat: implement SSR to get user and re run gen

beauwilliams · Mar 10, 2023 · 8a026e2 · 8a026e2
1 parent fd5daa8
commit 8a026e2
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 104 deletions.
diff --git a/apps/my-frontend/api/auth/auth.gql.gen.ts b/apps/my-frontend/api/auth/auth.gql.gen.ts
@@ -7,53 +7,40 @@ export type SignupMutationVariables = Types.Exact<{
   args: Types.SignupInput;
 }>;
 
-export type SignupMutation = {
-  __typename?: 'Mutation';
-  signup: {
-    __typename?: 'User';
-    id: string;
-    name?: string | null;
-    email: string;
-  };
-};
+
+export type SignupMutation = { __typename?: 'Mutation', signup: { __typename?: 'User', id: string, name?: string | null, email: string } };
 
 export type LoginMutationVariables = Types.Exact<{
   args: Types.LoginInput;
 }>;
 
-export type LoginMutation = {
-  __typename?: 'Mutation';
-  login: {
-    __typename?: 'User';
-    id: string;
-    name?: string | null;
-    email: string;
-  };
-};
+
+export type LoginMutation = { __typename?: 'Mutation', login: { __typename?: 'User', id: string, name?: string | null, email: string } };
+
 
 export const SignupDocument = gql`
-  mutation Signup($args: SignupInput!) {
-    signup(signupInput: $args) {
-      id
-      name
-      email
-    }
+    mutation Signup($args: SignupInput!) {
+  signup(signupInput: $args) {
+    id
+    name
+    email
   }
-`;
+}
+    `;
 
 export function useSignupMutation() {
   return Urql.useMutation<SignupMutation, SignupMutationVariables>(SignupDocument);
-}
+};
 export const LoginDocument = gql`
-  mutation Login($args: LoginInput!) {
-    login(loginInput: $args) {
-      id
-      name
-      email
-    }
+    mutation Login($args: LoginInput!) {
+  login(loginInput: $args) {
+    id
+    name
+    email
   }
-`;
+}
+    `;
 
 export function useLoginMutation() {
   return Urql.useMutation<LoginMutation, LoginMutationVariables>(LoginDocument);
-}
+};
diff --git a/apps/my-frontend/api/user/user.gql.gen.ts b/apps/my-frontend/api/user/user.gql.gen.ts
@@ -3,57 +3,39 @@ import * as Types from '@my-full-stack-app/my-client/generated/graphql-types';
 import { gql } from 'urql';
 import * as Urql from 'urql';
 export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
-export type GetUserQueryVariables = Types.Exact<{
-  args: Types.UserWhereUniqueInput;
-}>;
+export type GetUserQueryVariables = Types.Exact<{ [key: string]: never; }>;
 
-export type GetUserQuery = {
-  __typename?: 'Query';
-  user: { __typename?: 'User'; name?: string | null; email: string };
-};
 
-export type GetUsersQueryVariables = Types.Exact<{ [key: string]: never }>;
+export type GetUserQuery = { __typename?: 'Query', user: { __typename?: 'User', name?: string | null, email: string } };
+
+export type GetUsersQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type GetUsersQuery = { __typename?: 'Query', users: Array<{ __typename?: 'User', id: string, name?: string | null, email: string }> };
 
-export type GetUsersQuery = {
-  __typename?: 'Query';
-  users: Array<{
-    __typename?: 'User';
-    id: string;
-    name?: string | null;
-    email: string;
-  }>;
-};
 
 export const GetUserDocument = gql`
-  query GetUser($args: UserWhereUniqueInput!) {
-    user(where: $args) {
-      name
-      email
-    }
+    query GetUser {
+  user {
+    name
+    email
   }
-`;
-
-export function useGetUserQuery(options: Omit<Urql.UseQueryArgs<GetUserQueryVariables>, 'query'>) {
-  return Urql.useQuery<GetUserQuery, GetUserQueryVariables>({
-    query: GetUserDocument,
-    ...options,
-  });
 }
+    `;
+
+export function useGetUserQuery(options?: Omit<Urql.UseQueryArgs<GetUserQueryVariables>, 'query'>) {
+  return Urql.useQuery<GetUserQuery, GetUserQueryVariables>({ query: GetUserDocument, ...options });
+};
 export const GetUsersDocument = gql`
-  query GetUsers {
-    users {
-      id
-      name
-      email
-    }
+    query GetUsers {
+  users {
+    id
+    name
+    email
   }
-`;
-
-export function useGetUsersQuery(
-  options?: Omit<Urql.UseQueryArgs<GetUsersQueryVariables>, 'query'>
-) {
-  return Urql.useQuery<GetUsersQuery, GetUsersQueryVariables>({
-    query: GetUsersDocument,
-    ...options,
-  });
 }
+    `;
+
+export function useGetUsersQuery(options?: Omit<Urql.UseQueryArgs<GetUsersQueryVariables>, 'query'>) {
+  return Urql.useQuery<GetUsersQuery, GetUsersQueryVariables>({ query: GetUsersDocument, ...options });
+};
diff --git a/apps/my-frontend/api/user/user.gql.ts b/apps/my-frontend/api/user/user.gql.ts
@@ -1,8 +1,8 @@
 import { gql } from 'urql';
 
 const GET_USER = gql`
-  query GetUser($args: UserWhereUniqueInput!) {
-    user(where: $args) {
+  query GetUser {
+    user {
       name
       email
     }

diff --git a/apps/my-frontend/pages/users/index.tsx b/apps/my-frontend/pages/users/index.tsx
@@ -1,28 +1,28 @@
-import { GetUsersDocument, useGetUserQuery, useGetUsersQuery } from '../../api/user/user.gql.gen';
+import { GetUserDocument, GetUsersDocument, useGetUserQuery, useGetUsersQuery } from '../../api/user/user.gql.gen';
 import { withApi } from '../../api/my-client-api';
 import { GetServerSidePropsContext } from 'next';
 import { serverQuery } from '../../api/my-server-api';
 
 /* eslint-disable-next-line */
 export interface UsersProps {}
 
-export const getServerSideProps = (context: GetServerSidePropsContext) => {
-  return serverQuery(GetUsersDocument, {}, context);
+  //FIXME: return two props in one call for SSR and confirm no 200 requests in network tab to API
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  // const cur_user = serverQuery(GetUserDocument, {}, context);
+  const cur_users = await serverQuery(GetUsersDocument, {}, context);
+  return cur_users;
 };
 
-export function Users(props: UsersProps) {
-  const [data] = useGetUsersQuery({ variables: {} });
 
-  //TODO: pass id of current user and display their name
-  const [{ data: cur_usr, fetching }] = useGetUserQuery({
-    variables: { args: { id: 1, email: 'test@mail.com' } },
-  });
+export function Users(props: UsersProps) {
+  const [{ data: cur_user, fetching: fetching_user }] = useGetUserQuery();
+  const [{ data: cur_users, fetching: fetching_users }] = useGetUsersQuery();
 
   return (
     <section className="bg-gray-50 dark:bg-gray-900">
       <div className="flex flex-col items-center justify-center px-6 py-8 mx-auto">
         <h1 className="dark:text-white text-2xl py-4">
-          <span> Hello {fetching ? 'there' : cur_usr ? cur_usr?.user?.name + ' 👋 ' : 'Jane'}</span>
+          <span> Hello {fetching_user ? 'there' : cur_user ? cur_user?.user?.name + ' 👋 ' : 'Jane'}</span>
         </h1>
         <a
           href="#"
@@ -42,7 +42,7 @@ export function Users(props: UsersProps) {
                 Users
               </h1>
               <hr className="block mb-2 text-sm font-medium text-gray-900 dark:text-white" />
-              {data?.data?.users.map((user) => (
+              {cur_users?.users.map((user) => (
                 <div key={user.id}>
                   <p className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                     Name: {user.name}

diff --git a/libs/my-client/generated/graphql-types/src/lib/my-client-generated-graphql-types.ts b/libs/my-client/generated/graphql-types/src/lib/my-client-generated-graphql-types.ts
@@ -1,14 +1,8 @@
 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]>;
-};
+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]> };
 /** All built-in and custom scalars, mapped to their actual values */
 export type Scalars = {
   ID: string;
@@ -32,22 +26,27 @@ export type Mutation = {
   updateUser: User;
 };
 
+
 export type MutationCreateUserArgs = {
   data: UserCreateInput;
 };
 
+
 export type MutationLoginArgs = {
   loginInput: LoginInput;
 };
 
+
 export type MutationRemoveUserArgs = {
   where: UserWhereUniqueInput;
 };
 
+
 export type MutationSignupArgs = {
   signupInput: SignupInput;
 };
 
+
 export type MutationUpdateUserArgs = {
   data: UserUpdateInput;
   where: UserWhereUniqueInput;
@@ -59,10 +58,6 @@ export type Query = {
   users: Array<User>;
 };
 
-export type QueryUserArgs = {
-  where: UserWhereUniqueInput;
-};
-
 export type SignupInput = {
   email: Scalars['String'];
   name?: InputMaybe<Scalars['String']>;