Flinty Posts - Answer Overflow

Flinty

Explore posts from servers

•Created by Flinty on 9/3/2024 in #❓・help

OgImage - Crashing app

Hey, I have an app with OG Images enabled, using the package. Everything works on my localhost. Testing the endpoint: __og-image__/image/og.png displays the image correctly, both via npm run dev and via a Docker container, however when I deploy the container to my Kubernetes cluster, any requests to get the image causes the app to crash, with no logs:

2024-09-03T15:19:43+01:00 Listening on http://[::]:3000
// OG Image request happens in here
2024-09-03T15:19:54+01:00 Listening on http://[::]:3000

2024-09-03T15:19:43+01:00 Listening on http://[::]:3000
// OG Image request happens in here
2024-09-03T15:19:54+01:00 Listening on http://[::]:3000

The site URL is properly configured as well. Any thoughts?

5 replies

NNuxt

•Created by Flinty on 7/17/2024 in #❓・help

useFetch data not reactive

Hey! So I have a simple/new nuxt app with 2 pages, /index and /tenants Each page has an HTTP request to a backend service elsewhere. When I refresh the page, it the data loads fine, but when I navigate to another page, the data does not "load". By this I mean the state does not get updated with the newly fetched data (I can see the network request in devtools). Below is the relevant code: tenants.vue

let data: TenantIndexData = reactive({
    tenants: [] as Tenant[] | null
})
const { data: tenantsF, status: status } = await Get<Tenant[]>('http://localhost:9000/tenants')
if (tenantsF && tenantsF.value) {
    data.tenants = tenantsF.value
}

let data: TenantIndexData = reactive({
    tenants: [] as Tenant[] | null
})
const { data: tenantsF, status: status } = await Get<Tenant[]>('http://localhost:9000/tenants')
if (tenantsF && tenantsF.value) {
    data.tenants = tenantsF.value
}

index.vue

let tenantStats = reactive({
    total: null,
    newestTenant: null,
    monthlyAggregate: null,
    monthlyGrowth: null,
} as TenantStatistics)

const { data: stats, status: status } = await Get<TenantStatistics>('http://localhost:9000/tenants/dashboard')
if (stats.value) {
    tenantStats.monthlyGrowth = stats.value.monthlyGrowth
    tenantStats.total = stats.value.total
    tenantStats.monthlyAggregate = stats.value.monthlyAggregate
    tenantStats.newestTenant = stats.value.newestTenant
    console.log("Stats", tenantStats);

}

let tenantStats = reactive({
    total: null,
    newestTenant: null,
    monthlyAggregate: null,
    monthlyGrowth: null,
} as TenantStatistics)

const { data: stats, status: status } = await Get<TenantStatistics>('http://localhost:9000/tenants/dashboard')
if (stats.value) {
    tenantStats.monthlyGrowth = stats.value.monthlyGrowth
    tenantStats.total = stats.value.total
    tenantStats.monthlyAggregate = stats.value.monthlyAggregate
    tenantStats.newestTenant = stats.value.newestTenant
    console.log("Stats", tenantStats);

}

Below is the structure of Get

export const Get = async <T>(endpoint: string): Promise<ApiResponse<T>> => {
  const {
    status: status,
    data: data,
    refresh: refresh,
  } = useFetch<T>(() => endpoint, { initialCache: false });
  return { status: status, data: data, refresh: refresh };
};

export const Get = async <T>(endpoint: string): Promise<ApiResponse<T>> => {
  const {
    status: status,
    data: data,
    refresh: refresh,
  } = useFetch<T>(() => endpoint, { initialCache: false });
  return { status: status, data: data, refresh: refresh };
};

Oddly, the issue goes away after the first page navigation, and the code works as expected

1 replies

DIAdiscord.js - Imagine an app

•Created by Flinty on 8/22/2023 in #djs-questions

Slash Command redirect

Hi folks. Looking to create a slash command, that could allow the user to be redirected to an external url in their browser. The use case is signing up for an account on a website. I'd like to implement a /register command that would allow them to be redirected to my authentication service with some prepopulated values What's the best way to do this? Return a button or url for them to click, or can a redirect/open browser be forced?

24 replies

NNuxt

•Created by Flinty on 7/28/2023 in #❓・help

API Request not being triggered

Hey all. I have the following composable:

export const get = async (endpoint:string, lazy:boolean = true, errorCatch:boolean = true, fullUrl: boolean = false) => {
    let config = useRuntimeConfig()
    let apiUrl = config.public.apiUrl
    let url = `${apiUrl}/${endpoint}`
    console.log(url)
    let {data:data, pending:pending, refresh:refresh, error:error} = await useLazyFetch(url)
    if(error.value != null && errorCatch)
        handleErrors(error)
    console.log("ERROR", error)
    console.log("DATA", data)
    return {data, pending, refresh, error};
}

export const get = async (endpoint:string, lazy:boolean = true, errorCatch:boolean = true, fullUrl: boolean = false) => {
    let config = useRuntimeConfig()
    let apiUrl = config.public.apiUrl
    let url = `${apiUrl}/${endpoint}`
    console.log(url)
    let {data:data, pending:pending, refresh:refresh, error:error} = await useLazyFetch(url)
    if(error.value != null && errorCatch)
        handleErrors(error)
    console.log("ERROR", error)
    console.log("DATA", data)
    return {data, pending, refresh, error};
}

When I navigate to the route /communities from /, I run the following code on the communities page:

const {
  error: communitiesE,
  refresh: communitiesR,
  data: communitiesF,
  pending: initialPending,
} = await get(`community?pageNumber=${data.page}&size=${data.pageSize}`)
  data.communities = communitiesF.value.content
  data.totalPages = communitiesF.value.totalPages
  data.totalElements = communitiesF.value.totalElements

const {
  error: communitiesE,
  refresh: communitiesR,
  data: communitiesF,
  pending: initialPending,
} = await get(`community?pageNumber=${data.page}&size=${data.pageSize}`)
  data.communities = communitiesF.value.content
  data.totalPages = communitiesF.value.totalPages
  data.totalElements = communitiesF.value.totalElements

In my script setup element of the page. For whatever reason, a network request is never kicked off, and the console logs from the composable are all null (bar the URL being logged, which works when I paste the URL into the browser) Any ideas?

10 replies

NNuxt

•Created by Flinty on 4/16/2023 in #❓・help

useLazyFetch error Nuxt 3.4

29 replies

NNuxt

•Created by Flinty on 3/8/2023 in #❓・help

Nuxt 3 RC14 Page Transitions

Hi I just upgraded for RC11 to RC14 and my page transitions have stopped working. Has something changed? I currently have

    pageTransition: { name: 'page', mode: 'out-in' },
    layoutTransition: { name: 'layout', mode: 'out-in' },

    pageTransition: { name: 'page', mode: 'out-in' },
    layoutTransition: { name: 'layout', mode: 'out-in' },

In my nuxt.config.ts and CSS in my project's CSS file, yet the transitions have stopped working since upgrading last night

2 replies

NNuxt

•Created by Flinty on 3/5/2023 in #❓・help

useLazyFetch force refetch

Hey, all. Just making the move to Nuxt 3. I use useLazyFetch to fetch data on the client side/display loading screens. If I have 2 of these requests on one page, on the data from the first request is returned, and then the data is not refetched when navigating back to the page. I'm doing the below currently:

let {data:data, pending, refresh:refresh, error} = await useLazyFetch(url, {initialCache: null, key: Math.random().toString()})

let {data:data, pending, refresh:refresh, error} = await useLazyFetch(url, {initialCache: null, key: Math.random().toString()})

Surely this can't be the optimal solution to forcing the data to be refetched each time? Opinions welcome, I know this isn't right Cheers!

11 replies

NNuxt

•Created by Flinty on 2/23/2023 in #❓・help

Custom Error Page

Hey, I want to redirect the user to an error page if a server side API request fails. How can I do this? I've looked at the createError method, but how can I make the error page custom? I tried adding error.vue to my root directory, pages and layouts folders, with no luck

4 replies

Gaming

Programming