中继：在 Fragment 中使用常量而不是 graphql`...`

Posted 2023-03-08

【中文标题】中继：在 Fragment 中使用常量而不是 graphql`...`

【英文标题】：Relay: use constant inside Fragment instead of graphql`...`

【发布时间】：2019-09-19 22:43:40

【问题描述】：

Relay createFragmentContainer 是一个很有用的功能，而且很容易使用：

const MyComponent = createFragmentContainer(
    MyFragmentComponent,
    
        job: graphql`
            fragment MyComponent_job on Job 
                id
            
        `
    
);

问题是当查询位于我的文件末尾时，很难阅读代码。我更喜欢在导入后将它放在右上角。像这样：

const QUERY_FRAGMENT = graphql`
    fragment MyComponent_job on Job 
        id
         
`
// Main code here

const MyComponent = createFragmentContainer(
    MyFragmentComponent,
    
        job: QUERY_FRAGMENT
    
);

但是在这种情况下中继编译器会抛出错误：FindGraphQLTags: 'createFragmentContainer' expects fragment definitions to be 'key: graphql'.

有没有办法分开createFragmentContainer和graphql？

【参考方案1】：

这似乎是babel-plugin-relay 的一个已知问题。如this issue 所述，解决方法是更改​​您的导入：

import Relay,  graphql  from 'react-relay'

const fragment = graphql`...`

...

Relay.createFragmentContainer(Component, fragment)