Next.js Discord

Discord Forum

Data not fetching form payload cms

Unanswered
Black Caiman posted this in #help-forum
Open in Discord
Black CaimanOP
Hi All,
Data not fetching from paylaod cms getting error:
import { queryClient } from "@/utils/payloadClient";
import { Media } from "@/payload-types";

// Define BlogData type
type BlogData = {
  title: string;
  createdAt: string;
  updatedAt: string;
  slug: string;
  image: string;
};

async function getBlogs(): Promise<BlogData[]> {
  try {
    const response = await queryClient(p =>
      p.find({
        collection: "blogs",
        page: 1,
        limit: 9,
      })
    );
    
    return response.docs.map((doc: any) => ({
      title: doc.title,
      createdAt: doc.createdAt,
      updatedAt: doc.updatedAt,
      slug: doc.slug,
      image: (doc.image as Media)?.url || "",
    }));
  } catch (error) {
    console.error("Error fetching blogs:", error);
    return [];
  }
}

export default async function BlogsPage() {
  const blogs = await getBlogs();
  
  return (
    <div>
      <h1>Blogs</h1>
      <div className="blogs-grid">
        {blogs.map((blog) => (
          <div key={blog.slug} className="blog-card">
            <img src={blog.image} alt={blog.title} />
            <h2>{blog.title}</h2>
            <p>Created: {new Date(blog.createdAt).toLocaleDateString()}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

here is payload client query

import { BasePayload, getPayload } from 'payload';
import configPromise from '@payload-config';

export const queryClient = async <T>(callBack: (payload: BasePayload) => Promise<T>) => {
    const payload = await getPayload({ config: configPromise });
    return await callBack(payload);
}

9 Replies

Black CaimanOP
Error:

⚠ ./node_modules/pg/lib/native/client.js
Module not found: Can't resolve 'pg-native' in 'C:\Users\ENGINEER-PC\Desktop\affiliate-marketing\node_modules\pg\lib\native'

Import trace for requested module:
./node_modules/pg/lib/native/client.js
./node_modules/pg/lib/native/index.js
./node_modules/pg/lib/index.js
./node_modules/@payloadcms/db-postgres/dist/index.js
./src/payload.config.ts
./src/utils/payloadClient.ts
./src/components/common/Navbar/SearchBox.tsx
./src/components/Navbar/Navbar.tsx
 GET / 500 in 10756ms
American black bear
make sure to import config in your payload client from your payload-config.ts
import config from "~/payload.config";

const payload = await getPayload({ config });
actually you might be doing that already but with different starter "@" instead of "~"
Black CaimanOP
still error isnt going :/
@American black bear ts import config from "~/payload.config"; const payload = await getPayload({ config });
Black CaimanOP
Module not found: Can't resolve 'fs'
   8 | const sign = require('./sign');
   9 | const PassThrough = require('stream').PassThrough;
> 10 | const fs = require('fs');
     | ^
  11 | const path = require('path');
  12 | const crypto = require('crypto');
  13 |

https://nextjs.org/docs/messages/module-not-found
Black CaimanOP
bro since i found the issue and i fix it but here anothe rissue occured no blogs title is fetching
import { queryClient } from '@/utils/payloadClient';

export default async function SearchBoxServer() {
  try {
    // Log to check if function starts
    console.log('SearchBoxServer function is starting...');

    // Fetch blog data from Payload CMS
    const response = await queryClient((payload) =>
      payload.find({
        collection: 'blogs',
        limit: 100,  // Limit the number of blogs fetched
        depth: 0,    // Reduce depth to avoid related data
        select: { title: true },  // Only fetch the title field
      })
    );

    // Log the full response to verify if it's being fetched correctly
    console.log('Full response:', JSON.stringify(response, null, 2));

    // Check if docs exists and has items
    if (!response?.docs || response.docs.length === 0) {
      console.log('No blogs found in the response');
      return;  // Simply return nothing if no blogs are found
    }

    // Log a sample document to verify its structure
    console.log('Sample blog document:', response.docs[0]);

    // Extract titles from the response
    const titles = response.docs
      .filter(blog => blog && typeof blog.title === 'string')
      .map(blog => blog.title);

    // Log the extracted titles
    console.log('Fetched Titles:', titles);

  } catch (error) {
    // Catch and log errors in case anything fails
    console.error('Error fetching blogs:', error);
  }
}
using payload cms ?