Next.js Discord

Discord Forum

API Question

Answered
Spotted Redshank posted this in #help-forum
Open in Discord
Spotted RedshankOP
HI I'v been struggling for a couple hours now with how to properly fetch my data. I'm trying to get my database data trough an api call to my backend. I'm using the src directory structure.

This is my code

"use client"

....

    useEffect(() => {
        fetch('/api/transcript')
        .then(response => response.json())
        .then(data => {
            setTranscript(data.data);
            setLoading(false);
        })
        .catch(error => console.error(error));
    }, []);

    const serializableTranscript = JSON.parse(JSON.stringify(transcript));
  
    function setAuthor(newAuthorId: string) {
    }
  
    return (
      <div>
        {!loading && 
          <div className='flex'>
            <div className='flex-1'>
              <TopNav></TopNav>
              <Board transcript={transcript as Object}></Board>
            </div>
    
            <SidNav transcript={serializableTranscript} setAuthor={setAuthor}></SidNav>
          </div>
        }
      </div>
    );

...


Api Get

import Database from '@/database/database';
import Transcript from '@/schemas/transcript';

export async function GET() {
    await Database();
    const transcript = await Transcript.findOne({});
    const data = JSON.parse(JSON.stringify(transcript));
    return Response.json({ data })
}
Answered by Ray
then in your sidnav you can do this
<Link href={`/?authorId=${transcript.authorId}`}>Author</Link>
View full answer

11 Replies

Spotted RedshankOP
It is not sending the data back but it does actually fetch from database.
I'v tried to not use "use client" but I'v just been having issues after issues
I'm pretty new to Next.js and I'm trying to switch to it from Laravel but it just seems so much harder with the "use client". And if I don't use it I can't call functions from the parent for example.
@Spotted Redshank It is not sending the data back but it does actually fetch from database.
Ray
hi, you can do it in server component like this
export default async function Page() {
  await Database();
  const transcript = await Transcript.findOne({});

  return (
    <>
      <div className="flex">
        <div className="flex-1">
          <TopNav></TopNav>
          <Board transcript={transcript}></Board>
        </div>

        <SidNav transcript={transcript} setAuthor={setAuthor}></SidNav>
      </div>
    </>
  );
}
Spotted RedshankOP
Hey thnx but I had this before. The issue with this was that I tried to change the Author of the transcript in the SidNav, which is supposed to also reload the board to show a different view. Sadly this did not work.
import TopNav from '@/app/transcript/top-nav';
import SidNav from '@/app/transcript/side-nav';
import Board from '@/app/transcript/board';
import Database from '@/database/database';
import Transcript from '@/schemas/transcript';

  export default async function Page() {
    await Database();
  
    const transcript = await Transcript.findOne({});
    const serializableTranscript = JSON.parse(JSON.stringify(transcript));
  
    async function setAuthor(newAuthorId: string) {
      'use server'
      transcript.authorId = newAuthorId;
    }
  
    return (
      <div>
        <div className='flex'>
          <div className='flex-1'>
            <TopNav></TopNav>
            <Board transcript={transcript as Object}></Board>
          </div>
  
          <SidNav transcript={serializableTranscript} setAuthor={setAuthor}></SidNav>
        </div>
      </div>
    );
  }
That is my old code.
Ray
then in your sidnav you can do this
<Link href={`/?authorId=${transcript.authorId}`}>Author</Link>
Answer
Spotted RedshankOP
Ah okay ill try that in a bit thnx
Ray
you could also do this with dynamic params
create the page in for example app/author/[id]/page.tsx
then you can get the params in the Page component
export default function Page({ params }: { params: { id: string } }) {}