Flinty
Flinty
Explore posts from servers
NNuxt
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
No description
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