sean Posts - Answer Overflow

sean

•Created by sean on 10/30/2024 in #support

How to avoid temporary undefined values in template literals in solid-meta?

In the browser the whole string gets displayed, but the data.name is undefined momentarily until the async data resolves. So the tab title goes from This -> undefined <- is undefined temporarily to This -> hello world <- is undefined temporarily. My intended behavior is that the title should not be displayed at all (or the hostname should be display) until everything in the string literal has resolved. Is there a way to not display the string at all until the data is resolved? Alternatively, is the below code correct - should I be using accessors / derived signals or should be just be using straight string literals (I found this to not be reactive)? I tried wrapping the meta tags with Suspense and I also tried wrapping them with <Show when={data()} /> but to no avail.

import { Meta, Title } from '@solidjs/meta'

const SomeComponent = () => {
  const data = createAsync(() => getData())
  const title = () => `This -> ${data().name} <- is undefined temporarily`
  return (
    <Title>{title()}</Title>
    <Meta property='og:title' content={title()} />
  )
}

import { Meta, Title } from '@solidjs/meta'

const SomeComponent = () => {
  const data = createAsync(() => getData())
  const title = () => `This -> ${data().name} <- is undefined temporarily`
  return (
    <Title>{title()}</Title>
    <Meta property='og:title' content={title()} />
  )
}

Some search engine webmasters tool started to see some undefined values in my strings, so I believe this is not the ideal behavior when it comes to meta tags.

3 replies

Gaming

Programming