Handling nested authentication in navigation


What are the best practices for handling user authentication using React Router and Apollo?

In my app, if you are authenticated the right most nav links say “Account” and “Log Out”, when you aren’t logged in they say “Log In” and “Register”. This is done by querying the database for the current user, passing user as a prop to Nav, and conditionally rendering the nav: {user._id ? (...) : (...)}.

Occasionally, this causes the app to crash, Cannot read property '_id' of null, since user: null. But occasionally it doesn’t, i.e. Nav will render if you’re logged out, user: { __typename: "User", _id: null, ... }. Obviously, this isn’t a working solution.

What are some ways of handling this better?