import { Site, menuID } from "./info";

interface QueryParams {
  [key: string]: string | number | boolean;
}

function buildQueryString(params: QueryParams): string {
  const query = Object.keys(params)
    .map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
    .join("&");
  return query ? `?${query}` : "";
}

async function fetchData(url: string, params?: QueryParams) {
  const query = params ? buildQueryString(params) : "";
  const response = await fetch(`${url}${query}`);
  const data = await response.json();
  const totalPages = Number(response.headers.get("X-WP-TotalPages"));

  return { data, totalPages };
}

export async function fetchLogo() {
  const url = `${Site}/wp-json/`;
  return fetchData(url);
}

export async function fetchImage(imageId: number) {
  const params: QueryParams = {};

  const url = `${Site}/wp-json/wp/v2/media/${imageId}`;
  return fetchData(url, params);
}

export async function fetchMenu() {
  const url = `${Site}/wp-json/options/menu/${menuID}`;
  return fetchData(url);
}

export async function fetchPosts(limit: number, page: number, tag?: string) {
  const params: QueryParams = {
    per_page: limit.toString(),
    page: page.toString(),
    ...(tag && { "filter[tag]": tag }),
  };

  const url = `${Site}/wp-json/wp/v2/posts`;
  return fetchData(url, params);
}

export async function fetchPost(slug: string) {
  const params: QueryParams = {
    slug,
    per_page: "1",
    _embed: true,
  };

  const url = `${Site}/wp-json/wp/v2/posts`;
  return fetchData(url, params);
}

export async function fetchPage(slug: string) {
  const params: QueryParams = {
    slug,
    per_page: "1",
    _embed: true,
  };

  const url = `${Site}/wp-json/wp/v2/pages`;
  return fetchData(url, params);
}

export async function fetchTags(searchTerm: string) {
  const params: QueryParams = {
    search: searchTerm,
  };

  const url = `${Site}/wp-json/wp/v2/tags`;
  return fetchData(url, params);
}

"use client";

import { useQuery } from "@tanstack/react-query";
import Hero from '../../components/hero';
import Post from '../../components/post';
import { fetchPosts } from '../../lib/api';

async function Home() {
  const { data: posts, status } = useQuery(['posts'], fetchPosts(3, 1));

  return (
    <>
      <Hero />
      <h2 className='relative flex pb-6 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-100 sm:text-3xl md:text-5xl z-20'>
        Latest
      </h2>
      <hr className='relative border-gray-200 dark:border-gray-700 z-20' />
      <div className='relative z-50'>
        {
          posts.map((post: any) => {
            return (
              <Post id={post.id} key={post.id} />
            );
          })
        }
      </div>
    </>
  );
}

export default Home;

import { useQuery } from '@tanstack/react-query';
import { fetchPosts } from '../lib/api';
import Post from './post';

function PostLoop({ limit, perPage, tag }: { limit: number, perPage: number, tag: string | undefined }) {
    const { data: posts, status } = useQuery(['posts'], () => fetchPosts( limit, perPage, tag ));

    return (
        posts.map((post: any) => {
            return (
              <Post id={post.id} key={post.id} />
            );
        })
    )
}

export default PostLoop;

posts.map((post: any) => {
  return (
    <Post id={post.id} key={post.id} />
  );
})

'use client'

import { useQuery } from '@tanstack/react-query';
import { fetchPosts } from '../lib/api';
import Post from './post';

function PostLoop({ limit, perPage, tag }: { limit: number, perPage: number, tag: string | undefined }) {
    const { data: posts, status } = useQuery([], () => fetchPosts( limit, perPage, tag ));

    console.log(posts);

    return (
        posts?.data.map((post: any) => {
            return (
              <Post id={post?.data?.id} key={post?.data?.id} />
            );
        })
    )
}

export default PostLoop;

export const fetchPosts = async () => {
  const response = await fetch(
    "https://jsonplaceholder.typicode.com/posts?limit=20"
  );
  const data = await response.json();
  const limitedData = data.slice(0, 10);
  return limitedData;
};

import Hero from '../../components/hero';
import PostLoop from '../../components/postLoop';

function Home() {
  return (
    <>
      <Hero />
      <h2 className='relative flex pb-6 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-100 sm:text-3xl md:text-5xl z-20'>
        Latest
      </h2>
      <hr className='relative border-gray-200 dark:border-gray-700 z-20' />
      <div className='relative z-50'>
        <PostLoop limit={3} perPage={1} tag="" />
      </div>
    </>
  );
}

export default Home;

WORDPRESS_GRAPHQL_ENDPOINT=[wordpress_url]/graphql
WORDPRESS_MENU_LOCATION_NAVIGATION=menu_location_id

/**
 * getAllPosts
 */

async function getAllPosts(apolloClient, process, verbose = false) {
  const query = gql`
    {
      posts(first: 10000) {
        edges {
          node {
            title
            excerpt
            databaseId
            slug
            date
            modified
            isSticky
            views
            readingTime
            words
            author {
              node {
                name
              }
            }
            tags {
              edges {
                node {
                  name
                }
              }
            }
          }
        }
      }
    }
  `;

  let posts = [];

  try {
    const data = await apolloClient.query({ query });
    const nodes = [...data.data.posts.edges.map(({ node = {} }) => node)];

    posts = nodes.map((post) => {
      const data = { ...post };

      if (data.author) {
        data.author = data.author.node.name;
      }

      if (data.tags) {
        data.tags = data.tags.edges.map(({ node }) => node.name);
      }

      if (data.excerpt) {
        //Sanitize the excerpt by removing all HTML tags
        const regExHtmlTags = /(<([^>]+)>)/g;
        data.excerpt = data.excerpt.replace(regExHtmlTags, '');
      }

      return data;
    });

    verbose && console.log(`[${process}] Successfully fetched posts from ${apolloClient.link.options.uri}`);
    return {
      posts,
    };
  } catch (e) {
    throw new Error(`[${process}] Failed to fetch posts from ${apolloClient.link.options.uri}: ${e.message}`);
  }
}

const query = gql`
    {
      posts(first: 10000) {
        edges {
          node {
            title
            excerpt
            databaseId
            slug
            date
            modified
            isSticky
            views
            readingTime
            words
            author {
              node {
                name
              }
            }
            tags {
              edges {
                node {
                  name
                }
              }
            }
          }
        }
      }
    }
  `;

export const POST_FIELDS = gql`
  fragment PostFields on Post {
    id
    categories {
      edges {
        node {
          databaseId
          id
          name
          slug
        }
      }
    }
    databaseId
    date
    isSticky
    postId
    slug
    title
  }
`;

export const POST_FIELDS = gql`
  fragment PostFields on Post {
    id
    categories {
      edges {
        node {
          databaseId
          id
          name
          slug
        }
      }
    }
    databaseId
    date
    isSticky
    postId
    slug
    title
    views
    readingTime
    words
  }
`;

import { useContext, createContext } from 'react';

import config from '../../package.json';

import { removeLastTrailingSlash } from 'lib/util';

export const SiteContext = createContext();

/**
 * useSiteContext
 */

export function useSiteContext(data) {
  let { homepage = '' } = config;

  // Trim the trailing slash from the end of homepage to avoid
  // double // issues throughout the metadata

  homepage = removeLastTrailingSlash(homepage);

  return {
    ...data,
    homepage,
  };
}

/**
 * useSite
 */

export default function useSite() {
  const site = useContext(SiteContext);
  return site;
}

const { metadata = {}, menus } = useSite();

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

<div
  className="prose prose-xl prose-p:m-0 prose-p:mb-4 prose-invert prose-img:rounded-md"
  dangerouslySetInnerHTML={{ __html: post[0].content.rendered }}
>
  {/* <Blocks data={post[0].blocks} /> */}
 </div>