title: GraphQL Fetch Working in Page Component Only
body: <p>I'm using <code>fetch()</code> to query GraphQL in <code>lib/api.js</code> like so:</p>
  <pre><code>const API_URL = process.env.WORDPRESS_API_URL
  
  async function fetchAPI(query, { variables } = {}) {
    const headers = { 'Content-Type': 'application/json' }
  
    const res = await fetch(API_URL, {
      method: 'POST',
      headers,
      body: JSON.stringify({
        query,
        variables,
      }),
    })
  
    const json = await res.json()
    if (json.errors) {
      console.error(json.errors)
      throw new Error('Failed to fetch API')
    }
    return json.data
  }
  </code></pre>
  <p>...</p>
  <pre><code>export async function getPostsByCategory(slug, batchSize, endCursor) {
    const data = await fetchAPI(
      `
      query ($slug: String!, $batchSize: Int, $endCursor: String) {
        posts(first: $batchSize, after: $endCursor, where: {categoryName: $slug}) {
          pageInfo {
            hasNextPage
            endCursor
          }
          edges {
            node {
              id
              categories {
                edges {
                  node {
                    name
                    slug
                    id
                  }
                }
              }
              date
              featuredImage {
                node {
                  sourceUrl(size: MEDIUM)
                  altText
                }
              }
              slug
              title
            }
          }
        }
      }
    `,
      {
        variables: { slug, batchSize, endCursor },
      }
    )
    return data
  }
  </code></pre>
  <p>If I call <code>getPostsByCategory()</code> in my page component [slug].js inside of <code>getStaticProps()</code> it returns data as expected. If, however, I use the same function <code>getStaticProps()</code> outside of get static props like so...</p>
  <pre><code>async function getPostsByCategory() {
      const moreArticles = await getMorePostsByCategory(categorySlug, 24, posts.pageInfo.endCursor)
      setFilteredArticles(...posts.edges, ...moreArticles.edges)
  }
  
  ...
  
  &lt;div onClick={loadMoreArticles}&gt;
      Load More
  &lt;/div&gt;
  </code></pre>
  <p>I get the <code>unexpected token in json at position 0 graphql</code> error.</p>
  <p>If, instead, I move the entire fetch logic into the page component like so...</p>
  <pre><code>async function getPostsByCategory() {
      const headers = { 'Content-Type': 'application/json' }
      const query = 
          `query ($slug: String!, $batchSize: Int, $endCursor: String) {
              morePosts: posts(first: $batchSize, after: $endCursor, where: {categoryName: $slug}) {
                pageInfo {
                  hasNextPage
                  endCursor
                }
                edges {
                  cursor
                  node {
                    id
                    categories {
                      edges {
                        node {
                          name
                          slug
                          id
                        }
                      }
                    }
                    date
                    featuredImage {
                      node {
                        sourceUrl(size: MEDIUM)
                        altText
                      }
                    }
                    slug
                    title
                  }
                }
              }
            }
          `
      const variables = {slug:categorySlug, batchSize:24, endCursor: endCursor || posts?.pageInfo.endCursor}
      const res = await fetch('http://localhost:10083/graphql', {
          method: 'POST',
          headers,
          body: JSON.stringify({
              query,
              variables
          }
              ),
      })
      const json = await res.json()
      if (json.errors) {
          console.error(json.errors)
          throw new Error('Failed to fetch API')
      }
      
      return json?.data
  }
  </code></pre>
  <p>... we return the expected data. I'm wondering if there's some limitation to fetching data in page components I don't know of. Any information about this is appreciated.</p>