I'm updating my former gatsby site using TypeScript. I encountered an issue while trying to retrieve data from a local JSON file:
There appears to be an error in your GraphQL query:
Cannot find field "allNavigationLinksJson" on type "Query".
If you believe that "allNavigationLinksJson" should exist within the type "Query," there are a few solutions to common problems:
- If you recently added a new data source or made changes in gatsby-node/gatsby-config, try restarting your development server.
- You may need to explicitly define your GraphQL schema if you intend to use optional fields like "allNavigationLinksJson."
It is recommended to specify your GraphQL schema for optional fields.
This is the structure:
\--data
\----navigation.json
\--src
The contents of navigation.json:
[{"title": "Home","href": "/"},]
The code from index.tsx:
import * as React from 'react';
import {
CreateSchemaCustomizationArgs,
HeadFC,
PageProps,
graphql,
useStaticQuery
} from 'gatsby';
import { Footer } from '../components/layout';
type DataProps = {
href: string;
title: string;
id: string;
};
const data = useStaticQuery(graphql
query NavQuery {
allNavigationLinksJson {edges {
node {
href
title
id
}
}
}
}
);
const IndexPage = ({ data: { title } }: PageProps<DataProps>) =>
{
return (
<main>{title}</main>
);};
export default IndexPage;
Contents of gatsby-config.ts:
import type { GatsbyConfig } from 'gatsby';
const config: GatsbyConfig = {
siteMetadata: {
title: `Test page`,
description: 'This is descrioption',
siteUrl: `https://test.test`,
author: 'me',
},
graphqlTypegen: true,
plugins: \[
'gatsby-plugin-offline',
'gatsby-plugin-react-helmet',
'gatsby-plugin-image',
'gatsby-plugin-sharp',
'gatsby-transformer-sharp',
'gatsby-plugin-sitemap',
'gatsby-plugin-breakpoints',
'gatsby-transformer-json',
{
resolve: 'gatsby-plugin-manifest',
options: {
icon: 'src/images/icon.png',
},
},
{
resolve: 'gatsby-plugin-anchor-links',
options: {
offset: -100,
duration: 1000,
},
},
{
resolve: 'gatsby-plugin-postcss',
options: {
postCssPlugins: \[
require('postcss-preset-env')({ stage: 0 }),
require('postcss-nested'),
\],
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'projects',`your text`
path: `${__dirname}/src/content/projects/`,
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'navigation',
path: `${__dirname}/data/`,
},
},
\],
};\`
I would appreciate any guidance on fetching data from a local file in Gatsby + TypeScript.
I have checked ___graphql but it does not contain allNavigationLinksJson. I have written types for the query and configured gatsby-config multiple times. Clearing cache did not solve the issue either. Upon running gatsby serve, I receive an error regarding gatsby-config.ts potentially needing conversion to gatsby-config.js. I am unsure whether this error is related to my query problem or is causing my query to fail.