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