Epic: build a deck (with cards, translations)

[mhsnook]

• Fix up the DeckMembership table (add back the deck ID)
• query a deck with GraphQL reading protected data
• view a deck index page with metadata
• view a single deck with details
• Feature: start a new deck #31
• Feature: add cards to deck #32
• Add a brand new Card (with new phrase and traslations) #38
• add a new translation to an existing card
• add a new translation to a new

This is the feature set that originally motivated the switch to GraphQL so we are going to start this in a graphql-first way even if the first step or 2 could be done otherwise. But we don't want to transition the whole GlobalContext object to the GraphQL fetching approach, so we will still use useGlobalContext.

[mhsnook]

It's unclear right now if we should be using the supabase/nextjs Auth Helpers. I think no? Maybe yes and then no? I don't want the code to be so specific that it relies too heavily on this one stack, but I would be happy to save work with a dedicated library. Looking at the examples though, it doesn't look like less code.

This is a moment to decide on what pattern I will support for this app's data fetching. I propose it goes like this:

• public data can be accessed from the edge/server and pre-rendered
• user-specific data is only for the client/browser, not pre-rendered

I think this trade-off is fine! It just means not doing server-rendering things that handle authenticated data / not handling JWTs on the edge, not using middleWare. I think. And I bet it's easier on the climate too. This is something to ponder a bit before I dive in.

[mhsnook]

Getting ready for the use of authenticated activity in the /app:

• Fully remove next/router for next/navigation #17
• Add sidebar and context into the /app folder's pages #18

[mhsnook]

I discovered in #22 and #23 that keeping track of different query clients could become a problem quickly. We have both public and auth'd reads and writes through the ever-convenient supabase-js already, but the switch to GraphQL for authenticated client-side read/writes, and unauthenticated server-side reads, could get tricky and I was having trouble with the documentation for URQL, trying to understand it well enough to apply the knowledge in the context of the NextJS framework and the supabase-js authentication flow.

So in #27, and #28 I tried react-query, aborting two initial attempts with v3, and then in #29 I tried it again but using the new v4 docs version and documentation site and it clicked in much better.

#30 fully removes the urql clients and dependencies (and swr, which didn't seem to be used anymore) in favor of @tanstack/react-query, which is wrapping requests by graphql-request (but in theory can wrap any kind of request, e.g. supabase-js type ones). This PR also documents the data structure a bit and lays out the responsibilities of the various files:

• queries.js that hold the new graphql queries (which document the database pretty nicely)
• fetchers.js with the async fetcher functions
• hooks.js and finally the hooks that the client uses to wrap these fetchers in the react-query cache layer/logic/react hooks.

So 30 is an important piece of work, but it's mostly/all groundwork for the rest of this project -- in #31 we start using the new approach to create a new deck (client side, authenticated mutations with the graphql API), and in #32 we will be able to browse all phrases in a language and choose to turn them into cards/add them to our deck.

[mhsnook]

In #32 and #38 I added mutations.js and posters.js to send mutations to the graphql API. Unfortunately, pg_graphql does not support mutations with nested objects, so we do have to await one post here to add the phrase, and then another two which run in parallel. I was trying to avoid this but it's working and it's not so slow.

That said, I may later go back and try to use a single request with multiple queries in one, which seems to be a nice feature of GraphQL, and use a pre-generated useId() to include with the new Phrase so I can post everything at once. But for now I will move on to the final requirement for this epic: Add a translation to an existing phrase.

[mhsnook]

Okay I'm going to declare this one done. Didn't get to "add a translation to an existing card" but then we also don't have the feature "change your status of an existing card" or "view a card without seeing its translation" (like study mode) or anything like that so card management and card detail can be a separate block of work for another issue/epic.