babel plugin import graphql

Babel-Plugin-Import-Graphql

Babel плагин включает в себя синтаксис import для файлов .graphql и .gql .

Для пользователей старого имени пакета (Babel-Plugin-INLINE-IMPORT-GRAPHQL-AST)

Унимок/миграция

По состоянию на 27 мая 2018 года babel-plugin-inline-import-graphql-ast Имя пакета устарело. Пожалуйста, используйте babel-plugin-import-graphql (NPM).

Мигрируя в Бабель-Плугин-Импорт-Графкл

Обновите конфигурацию вабеля

Обновление plugins массив:

babel-plugin-inline-import-graphql-ast (или inline-import-graphql-ast )-> import-graphql .

Обновите свой файл package.json

Обновите имя пакета в devDependencies :

babel-plugin-inline-import-graphql-ast > babel-plugin-import-graphql .

Убедитесь, что ваша версия строка совместима:

Первая правильная версия babel-plugin-import-graphql составляет 2.4.4 , поэтому, пожалуйста, убедитесь, что ваша версия строка соответствует этому. Например, "babel-plugin-import-graphql": "^2.0.0" -это нормально из-за камеры.

Если вы прикрепили к конкретной версии, вам нужно обновить и прикреплять как минимум до 2.4.4 или расширить диапазон версий, чтобы включить ее.

Поздравляю, все готово!

---

Если вам понравится мой пакет, пожалуйста, снимайте репо Github или поделитесь в Twitter (и следуйте за мной за обновлениями)!

Предварительные условия

• babel-core@^7.20.7 или @babel/core@^7.0.0-beta.49 (нижние бета-версии могут работать, но не были проверены)

• graphql-tag@^2.9.2 (только при использовании опции runtime , описанной ниже)

Установить

yarn add -D babel-plugin-import-graphql

или

npm i -D babel-plugin-import-graphql

В .babelrc файл:

{
  "plugins" : [ " import-graphql " ]
}

Каждый раз, когда вы изменяете файл GraphQL, кэш должен быть очищен для вступления в силу.

При использовании узла, необходимо очистить папку node_modules/.cache/babel-loader . Я рекомендую сдать соответствующий сценарий в вашем package.json и повторный сценарий при изменении файла GraphQL:

{
  "scripts" : {
    "start" : " rm -rf ./node_modules/.cache/babel-loader && node index.js "
  }
}

При использовании RACET Native, то кэш Metro должен быть сброшен каждый раз, когда вы меняете файл GraphQL:

 react-native start --reset-cache

Примечание. Пользователям Windows нужно будет использовать rimraf или другое решение вместо rm -rf .

Основное использование

...
import myQuery from './query.graphql'
...
export default graphql ( myQuery ) ( myComponent ) 

Поддерживаемые функции

Файлы схемы

Особенность	Описание
По умолчанию импорт	Весь исходный код для файла будет действовать как экспорт по умолчанию.
#IMPORT SYNTAX	Типы и т. Д. В одном файле GraphQL могут быть импортированы в другой файл GraphQL, используя этот синтаксис: #import "./types.graphql" . Эти импорты будут рекурсивно рекурсивно на любую разумную глубину файлов. В настоящее время весь контент в именованном файле будет импортирован, и нет возможности импортировать определенные типы. Если вы хотите это поведение, вы можете сохранить один тип в каждом файле.

Операция/фрагментные файлы

Все варианты синтаксиса импорта поддерживаются для не-схемы, кроме import './filename' .

Особенность	Описание
Несколько операций/фрагментов на файл	Несколько операций (запросы/мутации/подписки) и/или фрагменты могут быть размещены в одном файле. Однако в этом случае вы не можете использовать неназванные операции/фрагменты. Например, query { test } должен быть query someName { test } .
По умолчанию импорт	Первая или единственная операция/фрагмент в файле будет действовать в качестве экспорта по умолчанию. Однако, по причинам обратной совместимости, если в файле есть как операции, так и фрагменты, первая операция будет действовать как экспорт по умолчанию.
Названный импорт	Все операции/фрагменты, включая дефолт , действуют как названный экспорт.
#IMPORT SYNTAX	Фрагменты в одном файле GraphQL могут быть импортированы в другой файл GraphQL, используя этот синтаксис: #import "./fragment.graphql" . Эти импорты будут рекурсивно рекурсивно на любую разумную глубину файлов. В настоящее время все фрагменты в названном файле будут импортированы, и нет никакого способа импортировать определенные фрагменты. Если вы хотите такое поведение, вы можете сохранить один фрагмент в каждом файле.

Полный пример

До (без этого плагина):

ProductsPage.js

 import React , { Component } from 'react'
import gql from 'graphql-tag'
import { graphql } from 'react-apollo'

class ProductsPage extends Component {
  render ( ) {
    if ( this . props . data . loading ) return < h3 > Loading... </ h3 >
    return < div > { `This is my data: ${ this . props . data . queryName } ` } </ div >
  }
}

const productsQuery = gql `
  query products {
    products {
      productId
      name
      description
      weight
    }
  }
`

export default graphql ( productsQuery ) ( ProductsPage ) 

После (с этим плагином):

ProductFragment.Graphql

 fragment productFragment on Product {
  name
  description
  weight
}

Productsquery.graphql

 #import "./productFragment.graphql"
query products {
  products {
    productId
    ... productFragment
  }
}

ProductsPage.js

 import React , { Component } from 'react'
import { graphql } from 'react-apollo'
import myImportedQuery from './productsQuery.graphql'

class ProductsPage extends Component {
  render ( ) {
    if ( this . props . data . loading ) return < h3 > Loading... </ h3 >
    return < div > { `This is my data: ${ this . props . data . queryName } ` } </ div >
  }
}

export default graphql ( myImportedQuery ) ( ProductsPage ) 

Параметры

Вариант	Тип	По умолчанию	Описание
nodePath	Нить	значение переменной среды node_path	Предназначен для использования с React-app-rewire-inline-import-graphql-ast -используется для разрешения абсолютных путей к вашим файлам .gql / .graphql . Если в вашей среде уже есть переменная NODE_PATH , вам не нужно устанавливать эту опцию. В настоящее время не уважается #import Syntax.
runtime	Логический	ЛОЖЬ	Включение этой опции требует, чтобы graphql-tag был установлен в качестве резервного обеспечения. -Вместо того, чтобы внедрить проанализированный объект AST, который очень большой, эта опция инлегает ваш исходный код GraphQL вместе с импортом функции gql из graphql-tag и анализирует ваш исходный код GraphQL с gql во время выполнения.
extensions	Множество	[]	Включает загрузку файлов SDL GraphQL, которые имеют пользовательское расширение, например, .prisma '
emitDeclarations	Логический	ЛОЖЬ	Включает файлы Emmitting .d.ts рядом с GraphQL Query/Fragment Source File.

Для пользователей Create-React-App

Пользователи Create-React-App могут использовать этот пакет без выброса через React-App-rewire-inline-import-graphql-ast

Кредиты

Поведение этого плагина вдохновлен и в основном отражает погрузчик GraphQL-Tag Webpack

Этот пакет начался как модифицированная версия Babel-Plugin-Import