Having a problem querying custom fields and rendering them SSR/SSG

[YordanLV]

Hello,

I am struggling to properly render SSR/SSG a query with couple of custom fields in it.
I am able to render the fields on the page but as I soon try to view source, I get the response dumped as json inside the body instead of a proper dom, which is not ideal.

I have the following code:

`import { gql, useQuery } from '@apollo/client'
import { getApolloClient } from '@wpengine/headless'
import { getNextStaticPaths, getNextStaticProps, useUriInfo } from '@wpengine/headless/next'
import { GetStaticPropsContext } from 'next'
import React from 'react'

import Post from '../lib/components/Post'
import Posts from '../lib/components/Posts'
import WpComponents from '../wp-components'

const pageQuery = gql`
  query ($id: ID!, $idType: PageIdType) {
    page(id: $id, idType: $idType) {
      title
      template {
        ... on DefaultTemplate {
          customPage {
            ... on DefaultTemplate_Custompage {
              flexibleContent {
                ... on DefaultTemplate_Custompage_FlexibleContent_HeroBanner {
                  title
                  banner {
                    srcSet
                  }
                  fieldGroupName
                }
                ... on DefaultTemplate_Custompage_FlexibleContent_HeadlineAndText {
                  headline
                  text
                  fieldGroupName
                }
              }
            }
          }
        }
      }
    }
  }
`

export default function Page() {
  const pageInfo = useUriInfo()
  const page = useQuery(pageQuery, {
    variables: {
      id: pageInfo.uriPath,
      idType: 'URI',
    },
  })

  if (!pageInfo) {
    return <></>
  }

  if (pageInfo.isPostsPage) {
    return <Posts />
  }

  return (
    <>
      {page.data.page.template.customPage.flexibleContent.map((item, index) => (
        <WpComponents key={index} card={item} />
      ))}
    </>
  )
}

export function getStaticPaths() {
  return getNextStaticPaths()
}

export async function getStaticProps(context: GetStaticPropsContext) {
  const client = getApolloClient(context)
  await client.query({
    query: pageQuery,
    variables: {
      id: (context.params.page && context.params.page[0]) || '404',
      idType: 'URI',
    },
  })

  return getNextStaticProps(context)
}

Thank you

[jacobwise]

I think this has something to do with issue 344

We have experience a bunch of issues with the way the wp-templates works with Next's getStaticProps and getServerSideProps, and in general we recommend not using it. We also have a new version of the framework being released as @faustJS that will soon replace @wpengine/headless. It shouldn't be too difficult to migrate to @faustJS, but if you are too far into it that you are unable to migrate I can try to help you through the issue.

To really get a sense of where the problem is occurring it would be good to see the code for getStaticProps or getServerSideProps in BOTH your Next page as well as the template component if it is implemented there.

[josephfusco]

Hey @YordanLV we apologize for the late reply. Are you still experiencing issues with SSR/SSG?