Relay: Fragment names in graphql tags must be prefixed with the module name

Question

I am trying to follow the tutorial at https://www.howtographql.com/react-relay, but trying to tweak it for a very similar project. However I am getting an error when I am trying to invoke the compiler:

Parse error: Error: RelayFindGraphQLTags: Fragment names in graphql tags must be prefixed with the module name. Got `ListItem_data` in module `listItem`. in "components/showAll/list-item.js"

Simplified Folder Structure:

|enviornment.js
|src
  |_showAll
      |_ list-item.js
      |_ list.js
      |_ show-all.js


Schema is in root folder

Simplified Code:

----show-all.js (entry point)

import {
    QueryRenderer,
    graphql
  } from 'react-relay';
  import environment from '../../Enviornment';

  const ShowAllPageQuery = graphql`
    query ShowAllPageQuery {
        viewer {
            ...List_viewer
        }
    }
  `
const ShowAll = (props) => {
    return (
        <QueryRenderer
             environment={environment}
             query={ShowAllPageQuery}
             render={({error, props}) => {
                  if(error) {
                      return <div>{error.message}</div>
                  } else if(props) {
                      return <List viewer={props.viewer} />
                  }
                      return <div>Loading</div>
                  }}
          />
    )}

export default ShowAll

----list.js (child of showAll)

import {
    createFragmentContainer,
    graphql
  } from 'react-relay'

const List = (props) => {
    return (
        <>
          {props.viewer.translations.edges.map(({node}, index) => {
                return(
                   <ListItem color={index % 2 == 0 ? 1 : 0} key={node.__id} data={node} />
                )
            })}
        </>
    )
}

export default createFragmentContainer(List, graphql`
    fragment List_viewer on Viewer {
        translations(first: 10, orderBy: createdAt_DESC) @connection(key: "List_translations", filters:[]) {
            edges {
                node {
                    ...ListItem_data
                }
            }
        }
    }
`)

----list-item.js

import {
    createFragmentContainer,
    graphql
  } from 'react-relay'

const ListItem = (props) => {
    // const link = `/showall/${props.data.planCode}`
    return (
        <ListItemWrap color={props.color}>
            <Link to={link}>
                <Item>
                    <p>{props.data.planCode}</p>
                    <p>{props.data.longName}</p>
                    <p>{props.data.shortName}</p>
                </Item>
            </Link>
        </ListItemWrap>
    )
}

export default createFragmentContainer(ListItem, graphql`
    fragment ListItem_data on ListItem {
        id
        planCode
        longName
        shortName
    }
`)

Schema:

type Mutation {
  createTranslation(planCode: String!, longName: String!, shortName: String!): Translation
  updateTranslation(id: ID!, planCode: String!, longName: String!, shortName: String!): String
  deleteTranslation(planCode: String!): String
}

type Query {
  translations: [Translation]
  translation(planCode: String!): Translation
}

type Translation {
  id: ID
  planCode: String
  longName: String
  shortName: String
}

Am I doing something wrong here?

Answer 1

If I'm not wrong, I think the compiler is case-sensitive. So you either have to:

1. rename your file, e.g., list-item.js to ListItem.js
2. or try to rename the fragment, e.g., ListItem_data to list-item_data

I'd prefer option #2