Adding a Header

[captDaylight]

Hey love what you built here. There aren't a lot of apollo examples that don't store a jwt token in localstorage and use that to determine if a user is logged in, so glad to see a solution using sessions!

I'm curious to see how you would handle something like a Header component that's outside of your AuthRoutes, but that reflects the current auth state by either showing Login/Register or Logout. So when I log in, the header then knows to update and show the logout link.

so something like:

<ApolloProvider client={client}>
  <Header />
  <Routes />
</ApolloProvider>

[benawad]

That would work if you wanted to have the <Header /> displayed on every route.

Otherwise maybe something like this

  <BrowserRouter>
    <Switch>
      <Route exact={true} path="/register" component={RegisterConnector} />
      <Route exact={true} path="/login" component={LoginConnector} />
     <Route path="/" render={() => (
        <React.Fragment>
          <Header />
          <Route path="/listing/:listingId/chat" component={MessageConnector} />
          <Route path="/listing/:listingId/edit" component={EditListingConnector} />
          <AuthRoute path="/create-listing" component={CreateListingConnector} />
          <AuthRoute path="/delete-demo" component={DemoDelete} />
        </React.Fragment>
      )} />
    </Switch>
  </BrowserRouter>

that way you can pick which routes have a header.

As for what the header looks like, I would use the me query to fetch the current user. If it's null have the header display what you want when a user is not logged in yet, otherwise you could display the user's email or whatever you wanted.

[captDaylight]

Ya, I guess my problem is I have something similar to your "me" query in my header component. However, when I log in and a user object is returned, the header doesn't know to update so it is reflecting the logged out state. If I refresh, it will then switch over to the logged in state because it fetches on page load. Since the "me" query isn't associated with a user id, I think it won't know to refetch. Does that make sense? Would I need to manually have the header refetch? That seems redundant...

[benawad]

Yeah, so what you need to do is update the me query in the cache after the login mutation

[captDaylight]

Cool, that's what I figured, but I'm not sure how to do that the Apollo way. Do you have an example of a remote mutation updating the cache for another remote query? Thanks for all the help!

[benawad]

Here's the docs on it: https://www.apollographql.com/docs/react/essentials/mutations.html#update

Here's an example of me using it in a project: https://github.com/benawad/slack-clone-client/blob/2588510aeb4ed9127ae64eb21072307468dae79b/src/components/AddChannelModal.js#L76

[captDaylight]

thx 🙇‍♂️ ! exactly what I was looking for.