Graphql fragments not working in slices queries

[EibarJ]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I'm trying to create slices for my components and the queries for those components require to use Graphql Fragments since they are too long and repeat along other slices queries. I couldn't find anything on the documentation that says I can't use Graphql fragments inside slices queries so I'm guessing this is either a bug or it's missing in the documentation. I already did a lot of work implementing slices for my project and really need to be able to use fragments inside my slices queries.

Here is the code of the component I'm using to create the slice:

import React, { FunctionComponent } from 'react';
import { IButton, IImage, ILink } from 'bit/shared/declarations';
import { graphql } from 'gatsby';

interface IHeader1 {
  sliceContext: {
    sectionID: string;
  };
  data: {
    fields: {
      logo?: IImage | null;
      links?: ILink[] | null;
      signInButton?: IButton | null;
      button2?: IButton | null;
    };
  };
}

const Header1: FunctionComponent<IHeader1> = ({ sliceContext, ...props }) => {
  return <div></div>;
};

export default Header1;

export const query = graphql`
  query SectionHeader1Query($sectionID: String!) {
    fields: datoCmsSectionHeader1(id: { eq: $sectionID }) {
      id
      logo {
        ...PngImage
      }
    }
  }
`;

When I try to run my project I get the following error:

 ERROR #85901  GRAPHQL.UNKNOWN

There was an error in your GraphQL query:

Fragment "PngImage" is never used.

GraphQL request:2:3
1 |
2 |   fragment PngImage on DatoCmsFileField {
  |   ^
3 |     url

File: src\components\all-sections\Header1\index.tsx:66:3



  GraphQLError: Fragment "PngImage" is never used.

  - query-compiler.js:374 processDefinitions
    [apg-vgift]/[gatsby]/src/query/query-compiler.js:374:20

  - query-compiler.js:179 processQueries
    [apg-vgift]/[gatsby]/src/query/query-compiler.js:179:10

  - query-compiler.js:80 compile
    [apg-vgift]/[gatsby]/src/query/query-compiler.js:80:19

  - query-watcher.ts:236 updateStateAndRunQueries
    [apg-vgift]/[gatsby]/src/query/query-watcher.ts:236:40

  - extract-queries.ts:18 extractQueries
    [apg-vgift]/[gatsby]/src/services/extract-queries.ts:18:3


failed extract queries from components - 3.000s                                                                                                                                                                                                  
warn The GraphQL query in the non-page component "C:/Users/ejhea/OneDrive/Escritorio/CXN/apg-vgift/src/components/all-sections/ApgFooter1/query.js" will not be run.                                                                             
warn The GraphQL query in the non-page component "C:/Users/ejhea/OneDrive/Escritorio/CXN/apg-vgift/src/components/all-sections/ApgHeader1/query.js" will not be run.                                                                             
Exported queries are only executed for page components. It's possible you're trying to create pages in your gatsby-node.js and that's failing for some reason.                                                                                   

If the failing component is a regular component and not intended to be a page component, you generally want to use "useStaticQuery" (https://www.gatsbyjs.com/docs/how-to/querying-data/use-static-query/) instead of exporting a page query.    

If you're more experienced with GraphQL, you can also export GraphQL fragments from components and compose the fragments in the Page component query and pass data down into the child component
(https://www.gatsbyjs.com/docs/reference/graphql-data-layer/using-graphql-fragments/)

Reproduction Link

https://www.gatsbyjs.com/docs/how-to/performance/using-slices/#:~:text=build%20looks%20like%3A-,Using%20the%20Slice%20component%20in%20gatsby%2Dnode,Slice%20component%20a%20unique%20id%20.&text=Now%20that%20you%20have%20a,created%2C%20let's%20go%20use%20it!

Steps to Reproduce

1. Create a gatsby project
2. Implement slices
3. Try to use Graphql Fragments
   ...

Expected Result

I would excpect the slices queries accept fragments just as the page queries (Any fragments defined).

Actual Result

The slices queries don't detect the fragments exists.

Environment

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 AMD Ryzen 7 5800U with Radeon Graphics         
  Binaries:
    Node: 18.0.0 - ~\.nvm\versions\node\v18.0.0\bin\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.6.0 - ~\.nvm\versions\node\v18.0.0\bin\npm.CMD
  Languages:
    Python: 3.11.2 - /c/Users/ejhea/AppData/Local/Programs/Python/Python311/python
  Browsers:
    Edge: Spartan (44.22621.2134.0), Chromium (116.0.1938.69)
  npmPackages:
    gatsby: ^5.11.0 => 5.11.0 
    gatsby-core-utils: ^4.11.0 => 4.11.0 
    gatsby-plugin-canonical-urls: ^5.11.0 => 5.11.0 
    gatsby-plugin-facebook-pixel: ^1.0.8 => 1.0.8 
    gatsby-plugin-google-gtag: ^5.11.0 => 5.11.0 
    gatsby-plugin-image: ^3.11.0 => 3.11.0 
    gatsby-plugin-nprogress: ^5.11.0 => 5.11.0 
    gatsby-plugin-react-helmet: ^6.11.0 => 6.11.0 
    gatsby-plugin-sitemap: ^6.11.0 => 6.11.0 
    gatsby-plugin-styled-components: ^6.12.0 => 6.12.0 
    gatsby-source-datocms: ^5.1.2 => 5.1.2

Config Flags

No response