Auto-Helmet not working

Get Help and Help Others
1

I hope there is a better way to do this…

I’ve a database table with route words and things to load into a React-Helmet, I’m starting with title

The useLocation hook is not firing every time I navigate() or <Redirect

usage, in my AppBar -- where the Menus are using useLocation just fine

              <AppBar position="static">
                <LocationProvider>
                  <Toolbar>
                    <NavMenu />
                    <AppTitle />
                    <AvatarMenu />
                    <LogInOutButton logOutOptions={{}} />
                  </Toolbar>
                </LocationProvider>
              </AppBar>

AppTitle Component

// https://material-ui.com/components/switches/
import { Box, Typography } from '@material-ui/core'

import { navigate, routes } from '@redwoodjs/router'
import { useLocation } from '@redwoodjs/router'

import HelmetCell from 'src/cells/HelmetCell'

import useSharedStyles from 'src/hooks/shared-styles'

export const AppTitle = ({  }) => {
  const classes = useSharedStyles()

  const { pathname } = useLocation()
  console.debug(`AppTitle ~ pathname`, pathname)

  const clickHome = () => navigate(routes.home())

  return (
    <Box className={classes.flexGrow}>
      <Typography variant="h5" className={classes.appBarTitle} onClick={clickHome}>
        <HelmetCell pathname={pathname} />
      </Typography>
    </Box>
  )
}

src/cells/HelmetCell

import type { FindHelmetQuery } from 'types/graphql'
import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'

export const beforeQuery = (props) => {
  const { pathname } = props;
  let id
  try {
    id = pathname.split('/')[1]
    console.debug(`beforeQuery ~ id`, id)
  } catch (err) {
    id = 'working'
  }
  const variables = { id, ...props }
  return { variables, fetchPolicy: 'no-cache' }
}

export const QUERY = gql`
  query FindHelmetQuery($id: String!) {
    helmet: helmet(id: $id) {
      id
      base
      bodyAttributes
      htmlAttributes
      link
      meta
      noscript
      script
      style
      title
    }
  }
`

export const Loading = () => <div>Loading...</div>

export const Empty = () => <div>Empty</div>

export const Failure = () => <span>Vaccess, by Vaxxifi, Inc.</span>

export const Success = ({ helmet }: CellSuccessProps<FindHelmetQuery>) => {
  const redactNulls = (k,v) => !v ? undefined : v
  console.debug(`Success ~ helmet`, JSON.stringify(helmet, redactNulls, 2))
  try {
    return <span>{helmet.title}</span>
  } catch (err) {
    return <span>Vaccess, by Vaxxifi, Inc.</span>
  }
}
2

Are you using Redwood’s MetaTags to include ReactHelmet San added in v35?

It also support dynamic tags loaded from cells:

Questions:

  1. Is your AppBar in a Layout?
  2. If you move the AppBar to a page for a few, is there a different behavior?
  3. Do you see that the HelmetCell query makes a network call, but just doesn’t set data.
  4. What happens if you pass pathname from AppBar to ToolBar to AppTitle?