Реле: используйте константу внутри 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)