implementing GraphQL Fragments in react

I am currently getting graphql data from this piece of code (when the component is rendered, the result of this query is sent as props to the component):

export const query = graphql`
    query ArticleById($id: String) {
        dataFromGraphql(id: { eq: $id }) {
            ...getAllContents
            title
        }
    }
`;

I want to get additional information from grapqhl and I have read that this is done with GraphQL Fragments.

I’m trying to follow that tutorial but I don’t know what I’m doing wrong.
I hope you can help me, it returns:

The fragment “getAllContents” does not exist.

This is my code:

import React from 'react';

import { graphql, PageProps } from 'gatsby';

type ArticleQueryProps = {
    dataFromGraphql: {
        title: string;
    };
};

type ArticlePageProps = PageProps<ArticleQueryProps>;

const MyComponent = (props: ArticlePageProps): JSX.Element => {
    const query1 = graphql`
        fragment getAllContents on dataFromGraphql {
            nodes {
                title
            }
        }
    `;

    return <></>;
};

export const query = graphql`
    query ArticleById($id: String) {
        dataFromGraphql(id: { eq: $id }) {
            ...getAllContents
            title
        }
    }
`;

export default MyComponent;

Read more here: Source link