GraphQL response time in React/NextJS

Viewed 81

My main question is; is there a difference in response time for fetching in localhost vs live/production?

I have a project im building in NextJS, with GraphCMS and I'm using GraphQL/graphql-request to fetch the data. When I first start up localhost and the pages loads, I click a link in the page navigation to go to about page and it literally takes 2 seconds for the data to fetch and the page to change. I'm watching the network tab in Chrome DevTools and the .json file status is (pending) and then switches to 200 once the content is downloaded. Here is a screenshot from DevTools:

enter image description here

When I hover over the waterfall, It says the Waiting for server response is 1.86s and content download is 0.46ms. So is the waiting for server response, something because im on a localhost, or is this something to do with the GraphCMS server were its fetching the data from?

Also you may note that the json file size is only 5.2kB, so its not a large fetch.

To give you a little context on the code, my queries & client are stored in the /lib folder:

// /lib/client.js
import { GraphQLClient } from 'graphql-request'

export const graphcmsClient = () =>
  new GraphQLClient(process.env.NEXT_PUBLIC_GRAPHCMS_URL, {
    headers: {
      authorization: `Bearer ${process.env.GRAPHCMS_TOKEN}`,
    },
  })

// example of a query in ./lib/queries.js
import { gql } from 'graphql-request'
    
const blogPageQuery = gql`
  fragment BlogPostFields on BlogPost {
    id
    category
    content
    coverImage {
      id
      height
      url
      width
    }
    excerpt
    published
    slug
    title
   }
  `

and here is an example where im using getStaticProps and fetching the query data:

export async function getStaticProps({ params, preview = false }) {
  const client = graphcmsClient(preview)
  const collectionCards = await getAllCollections()

  const { page, navigation } = await client.request(pageQuery, {
    slug: params.slug
  })

  if (!page) {
    return {
      notFound: true
    }
  }

  const parsedPageData = await parsePageData(page)

  return {
    props: {
      page: parsedPageData,
      navigation,
      collectionCards,
      preview
    },
    revalidate: 60
  }
}
0 Answers
Related