Luka
Suspense and dealing with large data
I am trying to display loading states until the data is arrvied, but I am facing some struggles, for now I am making a profile page where I am fetching large user data with just one createAsync with deferStream: true, this requires me to wrap the whole page in Suspense I am thinking this will lead to me making one large loading layout for just one suspense I don't think this is convenient.
Should I be fetching user data just by one createAsync or fetch some user data seperately I have about 22.5kb of data just by one fetch. should I have multiple fetches which I think should Allow me to use multiple suspenses
here is what I am doing and what I think I should change but I want just approval or direction I might be wrong
the user has information about themselves, skills and services. for now what I am doing is just fetching everything once which leads me to using one suspense.
What I think I should be doing is making multiple fetch request for skills services and their information that will allow me to use multiple suspense so I can make desired loading states.
What approach should I take? is loading everything with just one fetch and displaying one loading state convenient?
for now
Slow 4g: takes about 11s to load and on 9s the loading state appears until that loading state the page is white screen
Fast 4g: takes about 4.29s to load and on 2.34s appears the loading state
No throttling: takes about 445ms to load and on 340ms the loading state comes in
First when I started building the page I didn't care that much about suspense just used switch and show.
I also thought for some reason that I would be able to access user().services for example and I thought I would have multiple suspenses?
In general I find this topic little confusing so if Anyone could guide me I would be thankful.
5 replies
Server Side Rendering
So I started learning solidjs/solidstart around 3 months ago and instantly after 1-2 weeks I basically started building a project thinking I would learn more which actually is an easier way to learn for me. I've written some code but I don't really know if it is Server Side Rendered or not I want it to be SSR I am going to include some code here
// I have some imports up as well didn't want to include it
const user = createAsync(() => get_xelosani(props.params.id))
// - Some javascript here -
<MetaProvider>
<Title>{user()?.firstname + " " + user()?.lastname}</Title>
// more code down here
This is my config file
export default defineConfig({
optimizeDeps: {
exclude: ['js-big-decimal']
},
vite({ router }) {
if (router === "server") {
return {
server: {
port: 3000,
},
};
} else if (router === "client") {
} else if (router === "server-function") {
}
return { plugins: [] };
},
ssr: true
});
So based on these if anyone could guide me I would be thankful. Also if you guys have some article, video or book links about SSR with solid or without solid please link it to me.4 replies
Sevoral Error while using AbortController
I want to allow users to abort the request. So the flow goes like this, they upload image i set imageLoading signal to true and display cancel button if they click cancel button the same function will be called and it will check if imageLoading is true if it is true I want to abort the request here is some of my code
const handleFilePreview = async (file) => {
setImageLoading(true)
abortController = new AbortController();
if (imageLoading()) {
abortController.abort()
} else {
setImageLoading(true);
}
try {
const response = await preview_image(file, props.user().profId, {
signal: abortController.signal
})
if (response) {
batch(() => {
setFile(file)
setImageLoading(false)
setImageUrl(response)
})
}
} catch (error) {
console.log(error.name, error.message)
if (error.name === "AbortError") {
return setImageLoading(false)
}
}
}
9 replies
Abort server function
I want to allow users to upload image in preview stage, then I have a button where they can decide if they want to upload the image to server then s3,
But when user decides to upload the image to server and clicks a "upload" button, "Cancel" button appears. What I want to achieve is when user clicks "Cancel" button I want to abort the server function execution.
3 replies
Hydration problem?
I am having problems with buttons and links those don't work when I click any button it doesn't log out anything and when I click link it changes the path in url but doesn't navigate me to the desired page here is the github repo https://github.com/7Luke7/sheuketee
7 replies
No route matched for preloading js assets
I am navigating to a dynamic route via link which is correct but it just changes the route segments and things it is not actually navigating me to page nor loading the page, I have to manually refresh the page to see content, even after refreshing the desired page which is on that dynamic route buttons don't work and links to other pages does the same thing. But if I don't navigate to this dynamic route and navigate to other routes everything works fine
I want to fix routing problems buttons not getting clicked
Tried clearing cache restarting server looked around the code but couldn't find a problem
2 replies
Button click not working
For some reason clicking button and changing route doesn't work. when routing to another page it doesn't load content even tho it moves to new route in the case of button it doesn't do anything. I tried to clear browser cache but it isn't working tried to use different browser but its the same
2 replies
Vite Certificate
I just ran into problem while creating certificate for localhost, using vite I changed app.config.js the code below is my configuration
import { defineConfig } from "@solidjs/start/config";
import mkcert from "vite-plugin-mkcert";
export default defineConfig({
ssr: true,
vite: {
server: {
https: true
},
plugins: [
mkcert({
force: true,
savePath: "./cert",
}),
],
},
server: {
https: {
cert: "./cert/cert.pem",
key: "./cert/dev.pem"
},
},
})
I expect it to create valid certificate but browsers warn that its certificate is not valid.2 replies
Sevoral
Hey I am frequently getting sevoral errors I am guessing its parsing library, couldn't find documentation about it.
So I noticed it happens when I don't use JSON.stringify when sending data from server or don't use solidstart built in json function. If you could explain me how these work and link me documentation about Sevoral it would mean a lot.
So I noticed it happens when I don't use JSON.stringify when sending data from server or don't use solidstart built in json function. If you could explain me how these work and link me documentation about Sevoral it would mean a lot.
9 replies
Busboy "missing content-type" error
I am trying to use Busboy with Solidstart API, So I have POST api where form sends file, but I think busboy reads headers in a way that is not valid for my headers,
const bb = busboy({headers: request.request.headers })
request.request.headers return headerList where busboy tries to read content-type but it fails because its within the _HeadersList {
cookies: null,
[Symbol(headers map)]: Map(20) {--------- content-type is Somewhere here in the map ---------}
How can I modify thing in my code to make busboy able to handle things properly
4 replies
How to handle Loading/Error
I am making calls to server using createAsync it is returning a signal, how should I handle a loading and error states. what is the best practice, and also documentation says that it has these states as properties just like createResourse had but I can't access it.
2 replies
How does serializing work
I am trying to fetch a object that I got from mongodb, but when doing
return json(object, {
status: 200
})
and then
const response = await get_user(prof_id);
const data = await response.json()
The following error is logged "The value [object Object] of type "object" cannot be parsed/serialized."3 replies
