Fetching the file url and then render the associated file
So I'm trying to load a 3d file from the convex storage but I cant get it to work. It’s a .splat file. I only need a valid url of it to render it, though I seem to fetch it wrong. I exactly followed the docs on file serving. I uploaded the file to convex and made a collection called „models“ and saved a document with the files storageId.
`tsx
"use client";
import { Canvas } from "@react-three/fiber";
import { CameraControls, Splat } from "@react-three/drei";
import { useQuery } from "convex/react"; // Ensure query is imported
import { query } from "@/convex/_generated/server";
export default function Home() {
const data = query({
args: {},
handler: async (ctx) => {
const models = await ctx.db.query("models").collect();
return Promise.all(
models.map(async (model) => ({
...model,
// If the message is an "image" its `body` is an `Id<"_storage">`
...(model.name === "kio"
? { url: await ctx.storage.getUrl(model.storageId) }
: {}),
}))
);
},
});
return (
<main className="flex min-h-screen flex-col items-center justify-between h-screen">
<Canvas className="w-screen h-screen">
<CameraControls />
<Splat src={data.url} />
</Canvas>
</main>
);
}
4 Replies
Which docs are you following? the
query(.....) part has to be a in a separate file in your convex/ folderFollowed these docs: https://docs.convex.dev/file-storage/serve-files
Serving Files | Convex Developer Hub
Files stored in Convex can be served to your users by generating a URL pointing
If I put the query in a separate file, how do I call it then / get the returned value?
You've combined the backend function (
export const getModel = query({handler: async ...}) etc. with the frontend. Queries run on the server, but you've put this in your React component. You might try starting with an existing demo or going through the Tour of Convex first.