Adding GraphQL Queries and Fragments to a React Component

Add GraphQL queries to your React components.

GraphQL is the primary method for retrieving community data to use for your React component.

If you want to use GraphQL, we highly recommend you check out the Learn GraphQL documentation on the GraphQL site and our documentation, which includes a query editor that will help you construct a query.

GraphQL queries and fragments are in a subdirectory specific to the component in our example component. In the case of CatFactToast, it's /components/CatFactToast/.

For GraphQL queries and fragment files, the query file names should end in .query.graphql format and fragment file names should end in .fragment.graphql format.

Importing fragments into query files

An import line can import fragment files into a Query file. If you want to import a fragment called Sample, which is defined in a sample.fragment.graphql file, you would add one of the following imports to your query file:

To import a GraphQL fragment, perform the following:

import UserView from './sample.fragment.graphql';