Catalyst Blog Fetching functions

data-fetcher.ts

export async function fetchPayloadData({ endpoint }: { endpoint: string }) {
  const baseUrl = process.env.NEXT_PUBLIC_PAYLOAD_URL || '';

  try {
    const response = await fetch(baseUrl + endpoint);
    const data = await response.json();

    if (!response.ok) {
      throw new Error(`API fetch error: ${response.status}`);
    }

    return data;
  } catch (error) {
    console.error(error);
  }
}

export async function getBlogPosts(searchParams: {
  tagId?: string;
  limit?: string;
  page?: string;
  locale?: string;
}) {
  const { limit = 9, locale = 'en', page = 1, tagId } = searchParams;

  const apiResponse = await fetchPayloadData({
    endpoint: `/api/blog-posts?depth=1&limit=${limit}&page=${page}&sort=-publishedAt&locale=${locale}`,
  });

  if (!apiResponse) {
    return null;
  }

  return transformDataToBlogPosts(apiResponse, tagId);
}

export async function getBlogPost(searchParams: {
  blogId: string;
  locale?: string;
}) {
  const { blogId, locale = 'en' } = searchParams;

  const apiResponse = await fetchPayloadData({
    endpoint: `/api/blog-posts/${blogId}?depth=1&locale=${locale}`,
  });

  if (!apiResponse) {
    return null;
  }

  return transformDataToBlogPost(apiResponse);
}

// These functions are here primarily here to emulate the BigCommerce responses powering the BlogPost pages by default,
// so this can drop directly into an existing Catalyst page.
//
// e.g.  isVisibleInNavigation value is used in those pages and will render a 404 if it's set to false.
//
// That said, the functions do simplify the response used within the page and provide a central place to alter logic.

function transformDataToBlogPosts(apiResponse, tagId: string | undefined) {
  return {
    name: 'Blog',
    description: '',
    posts: {
      pageInfo: {
        hasNextPage: apiResponse.hasNextPage,
        hasPreviousPage: apiResponse.hasPrevPage,
        page: apiResponse.page,
      },
      items: apiResponse.docs.map((post) => {
        return {
          author: 'Test Author',
          entityId: post.id,
          name: post.title,
          plainTextSummary: post.shortDescription,
          publishedDate: { utc: post.createdAt },
          thumbnailImage: {
            url: post.thumbnailImage.url || '',
            altText: post.thumbnailImage.alt || '',
          },
        };
      }),
    },
    isVisibleInNavigation: true,
  };
}

function transformDataToBlogPost(apiResponse) {
  return {
    author: 'Test Author',
    htmlBody: apiResponse.content,
    content: apiResponse.content,
    id: apiResponse.id,
    name: apiResponse.title,
    publishedDate: { utc: apiResponse.createdAt },
    tags: [],
    thumbnailImage: apiResponse.thumbnailImage.url
      ? {
          altText: apiResponse.thumbnailImage.alt || '',
          url: apiResponse.thumbnailImage.url,
        }
      : null,
    seo: {
      metaKeywords: apiResponse.shortDescription,
      metaDescription: apiResponse.shortDescription,
      pageTitle: apiResponse.title,
    },
    isVisibleInNavigation: true,
    vanityUrl: undefined,
  };
}