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

Question

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`分开？

Answer 1

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

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

const fragment = graphql`...`

...

Relay.createFragmentContainer(Component, fragment)

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

Relay: use constant inside Fragment instead of graphql`...`

javascript

graphql

relayjs

relay

有没有办法把`createFragmentContainer`和`graphql`分开？

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

Relay: use constant inside Fragment instead of graphql`...`

javascript

graphql

relayjs

relay

有没有办法把createFragmentContainer和graphql分开？

有没有办法把`createFragmentContainer`和`graphql`分开？