中繼：在 Fragment 中使用常量而不是 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)