So I want to make an app where a user can create a 'Household' where they can invite other members of their family to have a shared database where they can store items in their pantry/kitchen.
The family members would have their emails added to an invite list, and upon their first log in, their email would be checked to see if it is on an invite list, and if it is, given the option to join the Household, and if not, the ability to create their own household.
When creating a new household, I would like to have the user supply a name for their household, their name and email (from next-auth session), and optionally a list of emails to send invites to.
I am using nextjs, prisma and trpc, all of which I am fairly new with, and I am wondering if the schema I have come up with is feasible, and what info I should add into a trpc procedure to take in the User info (from session data) and household name from the front end form.
Here is my prisma schema:
model Account {
id String @id @default(cuid())
userId String
type String
provider String
providerAccountId String
refresh_token String? @db.Text
access_token String? @db.Text
expires_at Int?
token_type String?
scope String?
id_token String? @db.Text
session_state String?
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
@@unique([provider, providerAccountId])
}
model Session {
id String @id @default(cuid())
sessionToken String @unique
userId String
expires DateTime
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
}
model User {
id String @id @default(cuid())
name String?
email String? @unique
emailVerified DateTime?
image String?
accounts Account[]
sessions Session[]
founder Boolean?
household Household? @relation(fields: [householdId], references: [householdId])
householdId String?
onInviteList Boolean? @default(false)
}
model VerificationToken {
identifier String
token String @unique
expires DateTime
@@unique([identifier, token])
}
model Household {
name String
householdId String @id @default(cuid())
members User[]
invitedList Invite[]
storageAreas StorageArea[]
}
model Invite {
email String @unique
isVerified Boolean?
Household Household? @relation(fields: [householdId], references: [householdId])
householdId String?
}
EDIT
This is how I was attempting to create the household:
My household.ts router:
export const householdRouter = createTRPCRouter({
create: protectedProcedure
.input(
z.object({
name: z.string(),
members: z.object({ name: z.string(), email: z.string() }),
})
)
.mutation(({ ctx, input }) => {
return ctx.prisma.household.create({
data: {
name: input.name,
members: input.members
},
});
}),
});
and on the front end
// for storing the sessionData to pass to backend
const [householdFounder, setHouseholdFounder] = useState<HouseholdFounder>({
name: "",
email: "",
});
useEffect(() => {
status === "authenticated" &&
setHouseholdFounder({
name: sessionData.user.name,
email: sessionData.user.email,
});
}, [status, sessionData]);
// and here's the input for receiving the household name and the trpc call to the backend
<input
type="text"
onChange={(e) => setHouseholdName(e.currentTarget.value)}
value={householdName ?? ""}
/>
<button
onClick={(e) => {
newHousehold.mutate({
name: householdName ?? "",
members: householdFounder,
});
setHouseholdName("");
}}
>
Create New Household
</button>
This throws a type error in the router when taking in the input.members:
Type '{ email: string; name: string; }' is not assignable to type 'UserUncheckedCreateNestedManyWithoutHouseholdInput | UserCreateNestedManyWithoutHouseholdInput | undefined'.ts(2322)
Thank you for an insight you can shed on this for me, I've been trying all day to get a household created with the proper info sent.
I am not an sql expert so I won't comment on the tables other than if prisma db push works its probably fine.
Based on the context of your question I presume you want to have all the user data, including the associated data from other tables inside the session user object (that gets passed to a protectedProcedure route in the t3 stack).
I suggest you forget about this and do it another way because next-auth stores session data in cookies (read here https://next-auth.js.org/configuration/options#cookies)
Cookies are not meant to be used for large ammounts of data, and shouldn't hold any particularaly sensitive data.
There are 2 important things to note that you may not be aware of.
1.
The user object in the session object is only a subset of your db user object. You can find (and add to) the session user type in server/auth.ts.
2.
Even if you chose to do it this way you are not saving a query.
I will give some guidance on how to go about it anyway.
In next-auth, you can define callbacks. https://next-auth.js.org/configuration/callbacks
The callback you will be interested in is session, you can find it in server/auth.ts
You can extend the user type I discussed erlier to include everything you want in the object, then in the session callback make a query to prisma and add that data into it. Now whenever you access session.user all this data will be available. It will also be available from the useSession hook.
Alternativly you can modify the enforceIsAuthed function in server/api/trpc to do the query there.
Now, you can do this however as previously stated I reccomend you forget about it and write a trpc query which fetches the data you need when you need it.
EDIT
Ok,
you need to look into many-to-many relationships. The prisma docs will help you alot.
Here is an example, based on the code in your edit
create: protectedProcedure.input(z.string()).mutation(async ({ ctx, input }) => {
const userId = ctx.session.user.id;
return ctx.prisma.household.create({
data: {
name: input,
members: {
connect: { id: userId } // set the table join
}
},
include: {
members: true // join the household and members in the return
}
});
}),
getUser: protectedProcedure.query(({ ctx }) => {
const userId = ctx.session.user.id;
return ctx.prisma.user.findUnique({
where: { id: userId },
include: { household: true } // include household. Note this object won't include members or invitedList as we need to explicitly join those also
});
})
Here we are calling protectedProcedure, which will fail with no user.
We get household name from the input and create a new household. members is a relation table so we connect the user who called the function with the new household record by the id, which is the join.
Now the frontend:
import { useSession } from "next-auth/react";
import { useState } from "react";
import { api } from "~/utils/api";
const Index = () => {
const { status } = useSession();
const utils = api.useContext();
const { mutate: createHousehold } = api.example.create.useMutation({
onSuccess: () => utils.example.getUser.invalidate() // invalidate the user query when we create so it fetches the updated user
});
const [householdName, setHouseholdName] = useState("");
const { data } = api.example.getUser.useQuery(undefined, {
enabled: status === "authenticated" // only get user data if logged in
});
if (status === "loading") return <div>loading...</div>;
if (status === "unauthenticated") return <div>unauthenticated</div>;
const handleSubmit = () => createHousehold(householdName);
return (
<>
<form onSubmit={handleSubmit}>
<label>Household name</label>
<input value={householdName} onChange={(e) => setHouseholdName(e.target.value)} />
<button type="submit">Create</button>
</form>
{data?.household && ( // only show this if the user data includes household (only will after the createHoldehold function)
<div>
<h2>You now belong to household {data.household.name}!</h2>
</div>
)}
</>
);
};
export default Index;
We don't need to hold the user data in state, we will get that server side. All we need is the user to be logged in and the household name.
I have used a form, which is bet practice but not required.