Question

我正在尝试按照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
}

我在这里做错什么了吗？

Answer 1

如果我没有记错，我认为编译器区分大小写。因此，您必须：

将您的文件（例如 list-item.js ）重命名为 ListItem.js
或尝试将片段重命名，例如将$DomainList = ($Forest.Domains).name | sort -CaseSensitive foreach ($Domain in $Domainlist){if ($Domain -like "sa*"){$Domains = $Domain}} or get-adforest | where-object {$_.Domains -like "sa*"}重命名为ListItem_data

我更喜欢选择＃2

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

1 个答案: