继电器:使用常数内部片段而不是graphql`..`

Question

中继 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？

Answer 1

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

import Relay, { graphql } from 'react-relay'
const fragment = graphql`...`
...
Relay.createFragmentContainer(Component, fragment)