How to GraphQL front-end tutorial project.

Final code can be found here, but I'm planning quite a few changes.

Roadmap

1. Move secrets to .env ✔️
2. Experiment with Tachyons, clean up the markup ✔️ (WIP)
3. Input validation & autocomplete ✔️
4. Move to Reach Router due to link focus issues on route change (see issue) ✔️
5. Add a query and client context for current user ✔️
6. Add a custom directive to restrict posts and votes on the server side.
7. Add mutation states with UI feedback
8. Add a redirect to login and back for unauth-d users on /create ✔️
9. 404 page ✔️
10. Cancelling upvotes with optimistic updates ✔️
11. Automatic cache updates ✔️
12. Debounce upvotes ✔️
13. Count upvotes by current user on the server via an aggregate query
14. Error in signup if email is already registered ✔️
15. Fetching loader
16. Switch from graphql-yoga to apollo-server (see discussion)
17. Add user post stats to the account page
18. Add moderator role: bans users, hides posts (see article)
19. TS?
20. Codemod the server to ES6 import statements
21. Expire the token, add a query to check if it's valid on app startup.

Notes

Context

NB: storing context in the same file as components can lead to a circular dependency (see issue), e.g. if I place AuthContext in App.js and import it in Header.js, which is itself imported in App.js.

Auth

This is pretty controversial: Why JWTs Suck as Session Tokens Discussion of Please Stop Using Local Storage. I'm sticking with JWT for now as I'm only storing a userID and there is no other sensitive data involved in the app. I'll also enable token expiry.

On the server, I set auth info on the context to reuse it everywhere. NB: Authorization header is not supported by the ws protocol. For ws subscriptions, the token is passed via connection.context (see footnotes here).

Routing

Reach Router can't navigate back yet, I'm using window.history.back().

Sorting

Sorting by length of related fields (e.g. links by number of votes) is not implemented in Prisma yet. Sorting on the client would break pagination and affect performance. For now, I'm sticking to sorting by scalar fields, but I might add total votes per link and sorting to the server schema.

Apollo

To make use of automatic updates in Apollo, I rewrote voting mutations so that they return the updated links instead of votes. As the UI is mapped to links from the GET_FEED query, Apollo is able to figure out when the links have updated and rerender automatically 🔥

By taking advantage of argument nullability, I was able to reuse the same feed query both on the homepage and in /search.

Prisma

...is pretty whimsy:

• Connection fields are not returned from a mutation (e.g. delete mutation on a link does not return its related votes): 1. Leaving it as is for now.
• Subscriptions don't always work with filters: 1. Looks like in my case it was due to nullable filters, so setting defaults to "" worked.
• Chaining a scalar field query in prisma-client throws an error. Temporary fix: chaining with $fragment.
• Delete subscription payload is null, so it can't return any data on deleted link: 1, 2. This might have to do with the chaining issue above, as I was able to extract the payload with a $fragment again.