reactjs - 中继：graphql标签中的片段名称必须以模块名称为前缀

问题描述

我正在尝试遵循https://www.howtographql.com/react-relay上的教程，但尝试针对非常相似的项目对其进行调整。但是，当我尝试调用编译器时出现错误：

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"

简化的文件夹结构：

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


Schema is in root folder

简化代码：

----show-all.js（入口点）

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（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
    }
`)

架构：

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
}

我在这里做错了吗？

标签： reactjsgraphqlrelay

reactjs - 中继：graphql标签中的片段名称必须以模块名称为前缀

问题描述

解决方案

推荐阅读