Graphql doesn't generate the same result as in local environment

Dear Community,
I was deploying a Gatsby blog site and met some problems.
Here is the build log and my site name is https://nevermoreblog.netlify.app. You can see my GitHub repo here https://github.com/Kspurs/nevermoresBlog

10:42:28 AM: build-image version: 3ffff9df3d5419545acc1b673a54de348174406d (focal)
10:42:28 AM: buildbot version: 5e61a99f29958b8aa3fd441571eb23975d453146
10:42:28 AM: Fetching cached dependencies
10:42:28 AM: Starting to download cache of 276.4MB
10:42:33 AM: Finished downloading cache in 4.409s
10:42:33 AM: Starting to extract cache
10:42:35 AM: Finished extracting cache in 2.954s
10:42:36 AM: Finished fetching cache in 7.43s
10:42:36 AM: Starting to prepare the repo for build
10:42:36 AM: Preparing Git Reference refs/heads/main
10:42:37 AM: Starting to install dependencies
10:42:37 AM: Python version set to 3.8
10:42:37 AM: Attempting Ruby version 2.7.2, read from environment
10:42:38 AM: Using Ruby version 2.7.2
10:42:39 AM: Started restoring cached go cache
10:42:39 AM: Finished restoring cached go cache
10:42:39 AM: go version go1.19.13 linux/amd64
10:42:39 AM: Using PHP version 8.0
10:42:40 AM: Started restoring cached Node.js version
10:42:41 AM: Finished restoring cached Node.js version
10:42:41 AM: v18.18.2 is already installed.
10:42:42 AM: Now using node v18.18.2 (npm v9.8.1)
10:42:42 AM: Enabling Node.js Corepack
10:42:42 AM: Started restoring cached build plugins
10:42:42 AM: Finished restoring cached build plugins
10:42:42 AM: Started restoring cached corepack dependencies
10:42:42 AM: Finished restoring cached corepack dependencies
10:42:42 AM: No npm workspaces detected
10:42:42 AM: Started restoring cached node modules
10:42:42 AM: Finished restoring cached node modules
10:42:42 AM: Installing npm packages using npm version 9.8.1
10:42:44 AM: npm WARN ERESOLVE overriding peer dependency
10:42:44 AM: npm WARN While resolving: react-server-dom-webpack@0.0.0-experimental-c8b778b7f-20220825
10:42:44 AM: npm WARN Found: react@18.2.0
10:42:44 AM: npm WARN node_modules/react
10:42:44 AM: npm WARN   react@"^18.2.0" from the root project
10:42:44 AM: npm WARN   23 more (@contentful/rich-text-react-renderer, ...)
10:42:44 AM: npm WARN
10:42:44 AM: npm WARN Could not resolve dependency:
10:42:44 AM: npm WARN peer react@"0.0.0-experimental-c8b778b7f-20220825" from react-server-dom-webpack@0.0.0-experimental-c8b778b7f-20220825
10:42:44 AM: npm WARN node_modules/react-server-dom-webpack
10:42:44 AM: npm WARN   react-server-dom-webpack@"0.0.0-experimental-c8b778b7f-20220825" from gatsby@5.12.9
10:42:44 AM: npm WARN   node_modules/gatsby
10:42:44 AM: npm WARN
10:42:44 AM: npm WARN Conflicting peer dependency: react@0.0.0-experimental-c8b778b7f-20220825
10:42:44 AM: npm WARN node_modules/react
10:42:44 AM: npm WARN   peer react@"0.0.0-experimental-c8b778b7f-20220825" from react-server-dom-webpack@0.0.0-experimental-c8b778b7f-20220825
10:42:44 AM: npm WARN   node_modules/react-server-dom-webpack
10:42:44 AM: npm WARN     react-server-dom-webpack@"0.0.0-experimental-c8b778b7f-20220825" from gatsby@5.12.9
10:42:44 AM: npm WARN     node_modules/gatsby
10:42:47 AM: npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
10:42:47 AM: npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
10:42:47 AM: npm WARN deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
10:42:47 AM: npm WARN deprecated @babel/plugin-proposal-object-rest-spread@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
10:42:56 AM: added 487 packages, removed 132 packages, changed 338 packages, and audited 1948 packages in 14s
10:42:56 AM: 446 packages are looking for funding
10:42:56 AM:   run `npm fund` for details
10:42:57 AM: 20 moderate severity vulnerabilities
10:42:57 AM: To address issues that do not require attention, run:
10:42:57 AM:   npm audit fix
10:42:57 AM: To address all issues possible (including breaking changes), run:
10:42:57 AM:   npm audit fix --force
10:42:57 AM: Some issues need review, and may require choosing
10:42:57 AM: a different dependency.
10:42:57 AM: Run `npm audit` for details.
10:42:57 AM: npm packages installed
10:42:57 AM: Successfully installed dependencies
10:42:57 AM: Starting build script
10:42:58 AM: Detected 1 framework(s)
10:42:58 AM: "gatsby" at version "5.12.9"
10:42:58 AM: Section completed: initializing
10:42:59 AM: ​
10:42:59 AM: Netlify Build                                                 
10:42:59 AM: ────────────────────────────────────────────────────────────────
10:42:59 AM: ​
10:42:59 AM: ❯ Version
10:42:59 AM:   @netlify/build 29.26.4
10:42:59 AM: ​
10:42:59 AM: ❯ Flags
10:42:59 AM:   baseRelDir: true
10:42:59 AM:   buildId: 655824913ae6f500085ae609
10:42:59 AM:   deployId: 655824913ae6f500085ae60b
10:43:00 AM: ​
10:43:00 AM: ❯ Current directory
10:43:00 AM:   /opt/build/repo
10:43:00 AM: ​
10:43:00 AM: ❯ Config file
10:43:00 AM:   No config file was defined: using default values.
10:43:00 AM: ​
10:43:00 AM: ❯ Context
10:43:00 AM:   production
10:43:00 AM: ​
10:43:00 AM: ❯ Loading plugins
10:43:00 AM:    - @netlify/plugin-gatsby@3.7.2 from Netlify app
10:43:01 AM: ​
10:43:01 AM: @netlify/plugin-gatsby (onPreBuild event)                     
10:43:01 AM: ────────────────────────────────────────────────────────────────
10:43:01 AM: ​
10:43:01 AM: Skipping @netlify/plugin-gatsby work, because used Gatsby version supports adapters.
10:43:01 AM: ​
10:43:01 AM: (@netlify/plugin-gatsby onPreBuild completed in 52ms)
10:43:01 AM: ​
10:43:01 AM: Build command from Netlify app                                
10:43:01 AM: ────────────────────────────────────────────────────────────────
10:43:01 AM: ​
10:43:01 AM: $ npm run build
10:43:01 AM: > nevermoresblog@1.0.0 build
10:43:01 AM: > gatsby build
10:43:04 AM: success compile gatsby files - 1.509s
10:43:04 AM: success load gatsby config - 0.027s
10:43:07 AM: success Installing Netlify adapter (gatsby-adapter-netlify@^1.0.0-alpha) - 2.811s
10:43:07 AM: info If you plan on staying on this deployment platform, consider installing gatsby-adapter-netlify as a dependency in your project. This will give you faster and more robust installs.
10:43:07 AM: info Using gatsby-adapter-netlify adapter
10:43:08 AM: info [gatsby-adapter-netlify] Found a Gatsby cache. We"re about to go FAST. ⚡
success load plugins - 0.428s
10:43:08 AM: success onPreInit - 0.003s
10:43:08 AM: success delete worker cache from previous builds - 0.002s
10:43:08 AM: info One or more of your plugins have changed since the last time you ran Gatsby. As
10:43:08 AM: a precaution, we"re deleting your site"s cache to ensure there"s no stale data.
success initialize cache - 0.119s
10:43:08 AM: success copy gatsby files - 0.084s
10:43:08 AM: success Compiling Gatsby Functions - 0.159s
10:43:08 AM: success onPreBootstrap - 0.284s
10:43:09 AM: success createSchemaCustomization - 0.005s
10:43:09 AM: success Clean up stale nodes - 0.072s - 0/0 0.00/s
10:43:09 AM: success Checking for changed pages - 0.000s
10:43:09 AM: success source and transform nodes - 0.486s
10:43:10 AM: info Writing GraphQL type definitions to /opt/build/repo/.cache/schema.gql
10:43:11 AM: success building schema - 1.098s
10:43:11 AM: success createPages - 0.058s
10:43:11 AM: success createPagesStatefully - 0.305s
10:43:11 AM: info Total nodes: 52, SitePage nodes: 11 (use --verbose for breakdown)
10:43:11 AM: success Checking for changed pages - 0.000s
10:43:11 AM: success Cleaning up stale page-data - 0.001s
10:43:11 AM: success onPreExtractQueries - 0.000s
10:43:19 AM: success extract queries from components - 8.231s
10:43:19 AM: success write out redirect data - 0.000s
10:43:19 AM: success onPostBootstrap - 0.001s
10:43:19 AM: info bootstrap finished - 18.500s
10:43:19 AM: success write out requires - 0.002s
10:43:20 AM: warning `isModuleDeclaration` has been deprecated, please migrate to `isImportOrExportDeclaration`
10:43:20 AM:     at isModuleDeclaration (/opt/build/repo/node_modules/@babel/types/lib/validators/generated/index.js:2748:35)
10:43:20 AM:     at PluginPass.Program (/opt/build/repo/node_modules/babel-plugin-lodash/lib/index.js:102:44)
10:43:27 AM: success Building production JavaScript and CSS bundles - 8.027s
10:43:37 AM: success Building HTML renderer - 9.707s
10:43:37 AM: success Execute page configs - 0.034s
10:43:37 AM: success Caching Webpack compilations - 0.000s
10:43:37 AM: success run queries in workers - 0.046s - 11/11 240.27/s
10:43:37 AM: success Merge worker state - 0.002s
10:43:37 AM: success Rewriting compilation hashes - 0.000s
10:43:37 AM: success Writing page-data.json and slice-data.json files to public directory - 0.003s - 11/11 3694.75/s
10:43:44 AM: error Truncated page data information for the failed page "/blog/my-second-post/": {
10:43:44 AM:   "errors": {},
10:43:44 AM:   "path": "/blog/my-second-post/",
10:43:44 AM:   "slicesMap": {},
10:43:44 AM:   "pageContext": {
10:43:44 AM:     "id": "7db4793e-ea7d-5624-a32e-85ccf3acfbd1",
10:43:44 AM:     "frontmatter__slug": "my second post",
10:43:44 AM:     "__params": {
10:43:44 AM:       "frontmatter__slug": "my-second-post"
10:43:44 AM:     },
10:43:44 AM:     "frontmatter": {
10:43:44 AM:       "title": "My second Post",
10:43:44 AM:       "date": "2023-11-13",
10:43:44 AM:       "slug": "my second post"
10:43:44 AM:     }
10:43:44 AM:   }
10:43:44 AM: }
10:43:44 AM: failed Building static HTML for pages - 3.991s
10:43:44 AM: error Building static HTML failed for path "/blog/my-second-post/"
10:43:44 AM: 
10:43:44 AM:   60 |     fontSize: "20px",
10:43:44 AM:   61 |     fontWeight: 500
10:43:44 AM: > 62 |   }, "TABLE OF CONTENTS"), data.mdx.tableOfContents.items.map(item => React.createElement(Box, {
10:43:44 AM:      |                                                     ^
10:43:44 AM:   63 |     key: item.title
10:43:44 AM:   64 |   }, React.createElement(Box, {
10:43:44 AM:   65 |     marginBottom: "10px"
10:43:44 AM: 
10:43:44 AM:   WebpackError: TypeError: Cannot read properties of null (reading "items")
10:43:44 AM:   
10:43:44 AM:   - {mdx.frontmatter__slug}.tsx:62 
10:43:44 AM:     nevermoresblog/src/pages/blog/{mdx.frontmatter__slug}.tsx:62:53
10:43:44 AM:   
10:43:44 AM:   - emotion-sheet.esm.js:55 
10:43:44 AM:     [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:55:1
10:43:44 AM:   
10:43:44 AM:   - emotion-sheet.esm.js:57 
10:43:44 AM:     [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:57:1
10:43:44 AM:   
10:43:44 AM:   - emotion-sheet.esm.js:63 
10:43:44 AM:     [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:63:1
10:43:44 AM:   
10:43:44 AM:   - emotion-sheet.esm.js:57 
10:43:44 AM:     [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:57:1
10:43:44 AM:   
10:43:44 AM:   - emotion-sheet.esm.js:63 
10:43:44 AM:     [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:63:1
10:43:44 AM:   
10:43:44 AM:   - emotion-sheet.esm.js:55 
10:43:44 AM:     [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:55:1
10:43:44 AM:   
10:43:44 AM:   - emotion-sheet.esm.js:57 
10:43:44 AM:     [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:57:1
10:43:44 AM:   
10:43:44 AM:   - emotion-sheet.esm.js:63 
10:43:44 AM:     [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:63:1
10:43:44 AM:   
10:43:44 AM:   - emotion-sheet.esm.js:66 
10:43:44 AM:     [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:66:1
10:43:44 AM:   
10:43:44 AM:   - Avatar.js:15 
10:43:44 AM:     [nevermoresblog]/[@mui]/material/Avatar/Avatar.js:15:1
10:43:44 AM:   
10:43:44 AM:   - emotion-sheet.esm.js:63 
10:43:44 AM:     [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:63:1
10:43:44 AM:   
10:43:44 AM:   - emotion-sheet.esm.js:57 
10:43:44 AM:     [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:57:1
10:43:44 AM:   
10:43:44 AM:   - emotion-sheet.esm.js:63 
10:43:44 AM:     [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:63:1
10:43:44 AM:   
10:43:44 AM:   - emotion-sheet.esm.js:57 
10:43:44 AM:     [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:57:1
10:43:44 AM:   
10:43:44 AM:   - emotion-sheet.esm.js:63 
10:43:44 AM:     [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:63:1
10:43:44 AM:   
10:43:44 AM: 
10:43:46 AM: ​
10:43:46 AM: "build.command" failed                                        
10:43:46 AM: ────────────────────────────────────────────────────────────────
10:43:46 AM: ​
10:43:46 AM:   Error message
10:43:46 AM:   Command failed with exit code 1: npm run build (https://ntl.fyi/exit-code-1)
10:43:46 AM: ​
10:43:46 AM:   Error location
10:43:46 AM:   In Build command from Netlify app:
10:43:46 AM:   npm run build
10:43:46 AM: ​
10:43:46 AM:   Resolved config
10:43:46 AM:   build:
10:43:46 AM:     command: npm run build
10:43:46 AM:     commandOrigin: ui
10:43:46 AM:     publish: /opt/build/repo/public
10:43:46 AM:     publishOrigin: ui
10:43:46 AM:   plugins:
10:43:46 AM:     - inputs: {}
10:43:46 AM:       origin: ui
10:43:46 AM:       package: "@netlify/plugin-gatsby"
10:43:47 AM: Failed during stage "building site": Build script returned non-zero exit code: 2
10:43:47 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
10:43:47 AM: Failing build: Failed to build site
10:43:47 AM: Finished processing build request in 1m19.099s

I write a graphql query in my blog template which includes querying the field tableOfContents

export const query = graphql`
  query ($id: String) {
    mdx(id: {eq: $id}) {
      frontmatter {
        title
        date(formatString: "MMMM D, YYYY")
      }
      tableOfContents
    }
  }
`

I can get the correct result in local development


However, the tableOfContentsfield seems to be null as showed in the build log
Btw, here is my definition for the type I declare the graphql query result as , where I extract the tableOfContents field. You can also see how I render my page with the data.

import * as React from 'react'
import { Link, PageProps, graphql } from 'gatsby'
import Appbar from '../../components/appbar'
import { Avatar, Box, Paper, ThemeProvider, Typography } from '@mui/material'
import { ComponentsWrapper } from '../../components/mdxcomponent'
import { ThemeContext } from '@emotion/react'
import theme from '../../components/theme'
interface queryData {
    mdx: {
        frontmatter: {
            title: string;
            date: string;
        }
        tableOfContents:{
            items:{
                url:string;
                title:string;
                items:{
                    url:string;
                    title:string;
                }[]
            }[]
        };
    }
}

const BlogPostTemplate:React.FC<PageProps<queryData>> = ({path, data,children}) => {
    

    return (
    
        <Box>
            <Appbar location={path}>

            </Appbar>
            <ThemeProvider theme={theme}>
            <Box sx={{display:'flex',paddingLeft:"300px",pr:'300px',maxWidth:'1000px'}}>
                <Paper sx={{flexGrow:2,padding:'50px'}} variant='outlined'>
                  <Typography variant='h3' mb={'20px'}>
                    {data.mdx.frontmatter.title}
                  </Typography>

                <Box mb={'20px'}>
                    <Avatar src='/IMG_20220602_233112.JPG'>;
                    </Avatar>
                    
                        <Typography sx={{marginTop:"10px"}} fontSize={'12px'}>
                            {'Nevermore'}
                        </Typography>
                    <Box display={'flex'} justifyContent={'space-between'}>
                        <Typography sx={{marginTop:'5px'}} variant="subtitle1" fontSize={'10px'} color={'gray'}>
                            {data.mdx.frontmatter.date}
                        </Typography>
                    </Box>
                </Box>
                  <ComponentsWrapper>
                    {children}
                  </ComponentsWrapper>
                </Paper>
                <Box flexGrow={1} minWidth={'200px'} ml={'100px'} mt={'30px'} position={'fixed'} right={'100px'}>
                    <Typography sx={{mb:'20px', color:'gray'}} fontSize={'20px'} fontWeight={500} >
                      TABLE OF CONTENTS
                    </Typography>
                    {

                      data.mdx.tableOfContents.items.map((item)=>(
                        <Box key={item.title}>
                          <Box marginBottom={'10px'}>
                            <Link to={item.url} className='internalLink'>{item.title}</Link>
                          </Box>
                          {
                            item.items.map((item)=>(
                              <Box key={item.title} sx={{mb:'10px',ml:'40px'}}>
                                <Link to={item.url} className='internalLink'>{item.title}</Link>
                              </Box>
                            ))
                          }
                        </Box>
                      ))
                    }
                </Box>  
            </Box>
            </ThemeProvider>
        </Box>
    )

}
export default BlogPostTemplate;
export const query = graphql`
  query ($id: String) {
    mdx(id: {eq: $id}) {
      frontmatter {
        title
        date(formatString: "MMMM D, YYYY")
      }
      tableOfContents
    }
  }
`

Why did this Happen? Thanks for support! :pray:

problem solved

after I cleared cache and retried building, my site has been successfully published.
seems related to cache or something.
Hope this will be helpful to those who meet similar problems.