Cannot get joined data in fetch result (server component, app router) | Next.js | Page 1

flint viper Oct 2, 2023, 6:36 PM

#

The fetch request in the server component returns the response without joined data (one-to-many relationship). I use the construction from the docs:

async function getData(slug: string) {
  const res = await fetch(`${HOST}/api/pub/news/${slug}`);
  if (!res.ok) {
    throw new Error("Failed to fetch data");
  }
  return res.json();
}

The usual request to the API on the client side returns the following answer:

{
  title: "Some title",
  img: "path_to_image",
  createdAt: "some date",
  comments: [
    ...some comments
  ]
}

However, the request in the server component does not give comments in the payload. Can this be fixed?

digital starBOT Oct 2, 2023, 6:36 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

hasty inlet Oct 2, 2023, 6:51 PM

#

Can you send the code for your API?

flint viper Oct 3, 2023, 3:14 AM

#

Hello! This is how the answer looks like:

[
  {
    "id": 308,
    "dir": "1i/1iu4f5fwxcugf5znc83i-855d44a5cc60ade9bbfe409d7fdc4bb6",
    "title": "I am Shutruk Nahunte, King of Anshand and Susa",
    "text": "I am Shutruk Nahunte, King of Anshand and Susa, Sovereign of the land of Elam. By the command of Inshushinak I destroyed Sippar, Took the Stele of Niran-Sin, and brought it back to Elam, where I erected it as an offering to my god, Inshushhinak.",
    "photos": ["8jsxbx4ejfh8n9niyda2.jpg"],
    "video": null,
    "youtube": null,
    "createdAt": "2023-09-02T15:22:03.382Z",
    "tags": ["news", "it"],
    "sourceurl": "https://www.rbc.ru/rbcfreenews/64f3360c9a79479accf9fa86",
    "looks": 66,
    "authorId": 1,
    "authorname": "Admin",
    "authorphotos": ["zcnx1kl4ip7s3sbnuluh.jpg"],
    "authordir": "ss/ssfvf5fsr9or8vfqiq7y-64443e80c8552cb29819106b1db44d3e",
    "comment": [
      {
        "id": 5,
        "text": "<p>Ab imo pectore</p>",
        "dir": null,
        "img": null,
        "createdAt": "2023-10-03T02:34:30.789553",
        "author": {
          "id": 1,
          "title": "Admin",
          "photos": ["zcnx1kl4ip7s3sbnuluh.jpg"],
          "dir": "ss/ssfvf5fsr9or8vfqiq7y-64443e80c8552cb29819106b1db44d3e"
        }
      },
      {
        "id": 6,
        "text": "<p>Shutruk-Nahhunte</p>",
        "dir": null,
        "img": null,
        "createdAt": "2023-10-03T03:04:07.43339",
        "author": {
          "id": 1,
          "title": "Admin",
          "photos": ["zcnx1kl4ip7s3sbnuluh.jpg"],
          "dir": "ss/ssfvf5fsr9or8vfqiq7y-64443e80c8552cb29819106b1db44d3e"
        }
      }
    ]
  }
]

#

The code is quite large. Here is the server component:

import NodataSingle from "@/components/NodataSingle";
import { imgProps } from "@/misc/stools";
import { IPost } from "@/misc/types";
import Post from "@/wrappers/Post";
import { Metadata, ResolvingMetadata } from "next";
import React from "react";

const HOST = process.env.NEXT_PUBLIC_HOST;

type Props = {
  params: { slug: string };
  searchParams: { [key: string]: string | string[] | undefined };
};

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata,
): Promise<Metadata> {
  const slug = params.slug;

  const data: IPost[] = await fetch(`${HOST}/api/pub/news/${String(slug)}`, {
    cache: "no-store",
  })
    .then((res) => res.json())
    .catch((err) => {
      throw new Error("Failed to fetch data");
    });

  const content = data[0];

  return {
    metadataBase: new URL(String(HOST)),
    title: content.title,
    description: content.text?.slice(0, 50) + "...",
    openGraph: {
      url: `${HOST}/news/${slug}`,
      title: content.title,
      description: content.text?.slice(0, 50) + "...",
      images:
        content.photos && content.dir
          ? content.photos.map((x) => {
              return {
                url: `/dist/${content.dir}/${x}`,
                ...imgProps(content.title),
              };
            })
          : [
              {
                url: "/dist/common/main.jpg",
                ...imgProps(content.title),
              },
            ],
    },
  };
}

async function getData(slug: string) {
  const res = await fetch(`${HOST}/api/pub/news/${slug}`, {
    cache: "no-store",
  });
  if (!res.ok) {
    throw new Error("Failed to fetch data");
  }

  return res.json();
}

export default async function Page({ params, searchParams }: Props) {
  const { slug } = params;
  const data = await getData(slug);

  if (data) {
    return <Post data={data[0]} slug={slug} />;
  } else return <NodataSingle />;
}

hasty inlet Oct 3, 2023, 3:17 AM

#

flint viper Hello! This is how the answer looks like: ``` [ { "id": 308, "dir": "1...

Oh so its fixed?

hasty inlet Oct 3, 2023, 3:18 AM

#

flint viper The code is quite large. Here is the server component: ``` import NodataSingle f...

I was more asking about the api code, where you're fetching

const res = await fetch('/${HOST}/api/pub/news/${slug}')

Do you have the code for that endpoint?

flint viper Oct 3, 2023, 3:18 AM

#

It's fixed by "cache: no store". But is it the right solution???

hasty inlet Oct 3, 2023, 3:18 AM

#

Well if it works it works 😆

#Cannot get joined data in fetch result (server component, app router)