Tom Posts - Answer Overflow

Tom

•Created by Tom on 4/29/2025 in #❓・help

When using useFetch with a watcher is it possible to keep data until the new query has a response?

I'm using the new 3.7 logic for fetching:

import { stringify } from 'qs-esm';

export const usePayloadFetch = (endpoint: string, query: any = {}) => {
    const serverURL = getPayloadURL();
    const path = computed(() => `${endpoint}${stringify(query, { addQueryPrefix: true })}`);
    return useFetch<any>(() => `${serverURL}/api/${path.value}`, { key: path });
};

import { stringify } from 'qs-esm';

export const usePayloadFetch = (endpoint: string, query: any = {}) => {
    const serverURL = getPayloadURL();
    const path = computed(() => `${endpoint}${stringify(query, { addQueryPrefix: true })}`);
    return useFetch<any>(() => `${serverURL}/api/${path.value}`, { key: path });
};

When the key changes, e.g. doing pagination, the data is reset to null until the new data is fetched. This is causing the UI to disappear for a split second until the new data is fetched, it's very jarring. Is it possible to prevent this from happening and it to wait for the new fetch to finish before replacing the data.

5 replies

NNuxt

•Created by Tom on 3/21/2025 in #❓・help

nuxt/fonts not loading bold

The output from nuxt/fonts is:

@font-face {
  font-family: 'Switzer';
  src: local("Switzer Regular"), local("Switzer"), url("/switzer-400.woff2") format(woff2);
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer';
  src: local("Switzer Regular Italic"), local("Switzer Italic"), url("/switzer-400-italic.woff2") format(woff2);
  font-display: swap;
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'GT Flexa';
  src: local("GT Flexa Regular"), local("GT Flexa"), url("/gt-flexa-400.woff2") format(woff2);
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Switzer';
  src: local("Switzer Regular"), local("Switzer"), url("/switzer-400.woff2") format(woff2);
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer';
  src: local("Switzer Regular Italic"), local("Switzer Italic"), url("/switzer-400-italic.woff2") format(woff2);
  font-display: swap;
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'GT Flexa';
  src: local("GT Flexa Regular"), local("GT Flexa"), url("/gt-flexa-400.woff2") format(woff2);
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

But in my /public folder I have:

gt-flexa-400.woff2
gt-flexa-700.woff2
switzer-400-italic.woff2
switzer-400.woff2
switzer-700-italic.woff2
switzer-700.woff2

gt-flexa-400.woff2
gt-flexa-700.woff2
switzer-400-italic.woff2
switzer-400.woff2
switzer-700-italic.woff2
switzer-700.woff2

Anything that is has 700 doesn't seem to be loading.

7 replies

NNuxt

•Created by Tom on 3/21/2025 in #❓・help

resolveComponent not working as expected

const formatBlockName = (): string => {
    const type = props.data.blockType as string;
    const typeFormatted = type.slice(0, 1).toUpperCase() + type.slice(1);
    return `Block${typeFormatted}`;
};

const blockName = formatBlockName();

const formatBlockName = (): string => {
    const type = props.data.blockType as string;
    const typeFormatted = type.slice(0, 1).toUpperCase() + type.slice(1);
    return `Block${typeFormatted}`;
};

const blockName = formatBlockName();

Returns BlockContentSection

const Block = resolveComponent(blockName);
const Block2 = resolveComponent('BlockContentSection');

const Block = resolveComponent(blockName);
const Block2 = resolveComponent('BlockContentSection');

Block2 renders Block gives error Failed to resolve component: BlockContentSection The template code is

<component :is="Block" :data />
<component :is="Block2" :data />

<component :is="Block" :data />
<component :is="Block2" :data />

I'm unsure why this is happening. Why Block doesn't and Block2 does, other than it will only accept a direct string in to resolveComponents but that defeats the purpose of them being dynamic.

5 replies

Gaming

Programming