Hi. I am using tanstack table, shadcn ui and app dir. I've columns definition which renders a dropdown with dialog'use client' export const columns: ColumnDef [] = [ { id: "actions", cell: ({ row }) => { const document = row.original; const [isOpen, setIsOpen] = useState(false); return ( Actions ); }, }, ];This ViewDocumentDialog needs to get details of the document fetched by its id. Should I and can I somehow fetch it on the server (I can't figure out how should the structure look like). Or should I just use tanstack query and fetch data on the client

Fetching data on the server when the component is deeply nested.

Unanswered

Siamese Crocodile posted this in #help-forum

Siamese CrocodileOP

2024-02-22T12:24:56.000Z

Hi. I am using tanstack table, shadcn ui and app dir. I've columns definition which renders a dropdown with dialog

'use client'
export const columns: ColumnDef<DocumentColumn>[] = [
  {
    id: "actions",
    cell: ({ row }) => {
      const document = row.original;

      const [isOpen, setIsOpen] = useState(false);

      return (
        <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
          <DropdownMenuTrigger asChild>
            <Button>
              <MoreHorizontal />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuLabel>Actions</DropdownMenuLabel>
            <ViewDocumentDialog document={document} />
          </DropdownMenuContent>
        </DropdownMenu>
      );
    },
  },
];

This ViewDocumentDialog needs to get details of the document fetched by its id. Should I and can I somehow fetch it on the server (I can't figure out how should the structure look like). Or should I just use tanstack query and fetch data on the client

40 Replies

Clown

2024-02-22T12:56:21.000Z

Fetch from a server component and pass it down, then filter what you need. Or you can directly fetch using server actions

Siamese CrocodileOP

2024-02-22T13:11:15.000Z

I cant fetch it from a server components

I could use server action in useQuery

So this is the way?

Siamese CrocodileOP

2024-02-22T13:37:58.000Z

Also

I am fetching a pdf file

How can I pass it from the server action to the client

I am getting an error that you can't do it...

â¨¯ Internal error: Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.

@Siamese Crocodile â¨¯ Internal error: Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.

Ray

2024-02-22T16:37:51.000Z

I think you can create the server action in a separate file then put 'use server' on top of it and export the action. And import it in the client component

@Ray I think you can create the server action in a separate file then put `'use server'` on top of it and export the action. And import it in the client component

Siamese CrocodileOP

2024-02-23T11:27:43.000Z

Thats what I was doing

But you cant pass blobs from server actions

I had to do it fully on the client without actions

lmk if there is a workaround

@Siamese Crocodile But you cant pass blobs from server actions

Ray

2024-02-23T11:39:15.000Z

are you trying to submit a file?

Siamese CrocodileOP

2024-02-23T11:39:40.000Z

I am trying to fetch a file

on the server

and pass it to the client

Ray

2024-02-23T11:40:26.000Z

then you don't need server action

how are you rendering the file?

Siamese CrocodileOP

2024-02-23T14:11:52.000Z

Okey maybe I do not need server action

But just an async function

Siamese CrocodileOP

2024-02-23T14:18:51.000Z

lets say I'd do smth like this:

getData.ts // async fn


  const data = await fetch(
    "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png"
  );

  return data.blob()

// page.tsx

  const blob = await getData()

  return (
    <>
      <Image src={URL.createObjectUrl(blob)} alt="test" width={100} height={100} />

It won't work either

@Siamese Crocodile lets say I'd do smth like this: ts getData.ts // async fn const data = await fetch( "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" ); return data.blob() // page.tsx const blob = await getData() return ( <> <Image src={URL.createObjectUrl(blob)} alt="test" width={100} height={100} />

Ray

2024-02-23T15:33:18.000Z

URL.createObjectURL() only work in client component

why don't you just put the url to src?

Siamese CrocodileOP

2024-02-23T15:33:53.000Z

Image requires authorization

header

Ray

2024-02-23T15:34:28.000Z

try to create a client component like this

"use client";

import { useEffect, useState } from "react";

export default function Image() {
  const [blob, setBlob] = useState<Blob | null>(null);

  useEffect(() => {
    fetch(
      "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png"
    ).then(async (res) => {
      const blob = await res.blob();
      setBlob(blob);
    });
  }, []);

  if (!blob) return <></>;

  return (
    <img src={URL.createObjectURL(blob)} alt="test" width={100} height={100} />
  );
}