babel plugin import graphql

바벨-플러그 인-임박-그라프 QL

.graphql 및 .gql 파일의 import Syntax를 활성화하는 Babel 플러그인.

이전 패키지 이름 (Babel-Plugin-inline-Import-GraphQL-AST) 사용자의 경우

감가 상각/마이그레이션 노트

2018 년 5 월 27 일 현재 babel-plugin-inline-import-graphql-ast 패키지 이름은 더 이상 사용되지 않습니다. 대신 babel-plugin-import-graphql (NPM)을 사용하십시오.

Babel-Plugin-Import-GraphQL로 마이그레이션

바벨 구성을 업데이트하십시오

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 Repo를 Star 또는 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 "
  }
}

React Native를 사용하는 경우 GraphQL 파일을 변경할 때마다 메트로 캐시를 재설정해야합니다.

 react-native start --reset-cache

참고 : Windows 사용자는 rm -rf 대신 rimraf 또는 다른 솔루션을 사용해야합니다.

기본 사용

...
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-lewire-inline-import-graphql-ast와 함께 사용하기위한 것 .gql / .graphql 파일에 대한 절대 경로를 해결하는 데 사용됩니다. 환경에 이미 NODE_PATH 변수를 설정 한 경우이 옵션을 설정할 필요가 없습니다. 현재 #import Syntax에 의해 존중되지 않습니다 .
runtime	부울	거짓	이 옵션을 활성화하려면 graphql-tag 동료 의존성으로 설치해야합니다. -이 옵션은 매우 큰 구문 분석 된 AST 객체를 인화하는 대신 GraphQL 소스 코드와 함께 gql 기능의 가져 오기와 함께 graphql-tag 를 인턴하고 런타임에 gql 과 함께 그래프 QL 소스 코드를 구문 분석합니다.
extensions	정렬	[]	사용자 정의 확장자 (예 : '.prisma')가있는 GraphQL SDL 파일로드 활성화
emitDeclarations	부울	거짓	EMMITTING .d.ts 파일 옆의 Quply Query/Fragment 소스 파일을 활성화합니다.

Create-React-App 사용자 용

Create-React-App 사용자는 React-App-Lewire-inline-Import-GraphQL-Ast를 통해 배출하지 않고이 패키지를 사용할 수 있습니다.

크레딧

이 플러그인의 동작은 GraphQL- 태그 웹 팩 로더에서 영감을 얻었으며 대부분 반영됩니다.

이 패키지는 Babel-Plugin-inline-Import의 수정 된 버전으로 시작되었습니다.