在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):apollographql/graphql-tag开源软件地址(OpenSource Url):https://github.com/apollographql/graphql-tag开源编程语言(OpenSource Language):TypeScript 75.9%开源软件介绍(OpenSource Introduction):graphql-tagHelpful utilities for parsing GraphQL queries. Includes:
gqlThe import gql from 'graphql-tag';
const query = gql`
{
user(id: 5) {
firstName
lastName
}
}
` The above query now contains the following syntax tree. {
"kind": "Document",
"definitions": [
{
"kind": "OperationDefinition",
"operation": "query",
"name": null,
"variableDefinitions": null,
"directives": [],
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"alias": null,
"name": {
"kind": "Name",
"value": "user",
...
}
}
]
}
}
]
} FragmentsThe import gql from 'graphql-tag';
const userFragment = gql`
fragment User_user on User {
firstName
lastName
}
` The above const query = gql`
{
user(id: 5) {
...User_user
}
}
${userFragment}
` Note: While it may seem redundant to have to both embed the Why use this?GraphQL strings are the right way to write queries in your code, because they can be statically analyzed using tools like eslint-plugin-graphql. However, strings are inconvenient to manipulate, if you are trying to do things like add extra fields, merge multiple queries together, or other interesting stuff. That's where this package comes in - it lets you write your queries with ES2015 template literals and compile them into an AST with the Caching parse resultsThis package only has one feature - it caches previous parse results in a simple dictionary. This means that if you call the tag on the same query multiple times, it doesn't waste time parsing it again. It also means you can use Importing graphQL filesTo add support for importing Given a file query MyQuery {
...
} If you have configured the webpack graphql-tag/loader, you can import modules containing graphQL queries. The imported value will be the pre-built AST. import MyQuery from 'query.graphql' Importing queries by nameYou can also import query and fragment documents by name. query MyQuery1 {
...
}
query MyQuery2 {
...
} And in your JavaScript: import { MyQuery1, MyQuery2 } from 'query.graphql' Preprocessing queries and fragmentsPreprocessing GraphQL queries and fragments into ASTs at build time can greatly improve load times. Babel preprocessingGraphQL queries can be compiled at build time using babel-plugin-graphql-tag. Pre-compiling queries decreases script initialization time and reduces bundle sizes by potentially removing the need for TypeScript preprocessingTry this custom transformer to pre-compile your GraphQL queries in TypeScript: ts-transform-graphql-tag. React Native and Next.js preprocessingPreprocessing queries via the webpack loader is not always possible. babel-plugin-import-graphql supports importing graphql files directly into your JavaScript by preprocessing GraphQL queries into ASTs at compile-time. E.g.: import myImportedQuery from './productsQuery.graphql'
class ProductsPage extends React.Component {
...
} Webpack loading and preprocessingUsing the included Example webpack configuration {
...
loaders: [
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: 'graphql-tag/loader'
}
],
...
} Create React AppPreprocessing GraphQL imports is supported in create-react-app >= v2 using evenchange4/graphql.macro. For create-react-app < v2, you'll either need to eject or use react-app-rewire-inline-import-graphql-ast. TestingTesting environments that don't support Webpack require additional configuration. For Jest use jest-transform-graphql. Support for fragmentsWith the webpack loader, you can import fragments by name: In a file called fragment MyFragment1 on MyType1 {
...
}
fragment MyFragment2 on MyType2 {
...
} And in your JavaScript: import { MyFragment1, MyFragment2 } from 'query.gql' Note: If your fragment references other fragments, the resulting document will
have multiple fragments in it. In this case you must still specify the fragment name when using the fragment. For example, with WarningsThis package will emit a warning if you have multiple fragments of the same name. You can disable this with: import { disableFragmentWarnings } from 'graphql-tag';
disableFragmentWarnings() Experimental Fragment VariablesThis package exports an You can enable / disable this with: import { enableExperimentalFragmentVariables, disableExperimentalFragmentVariables } from 'graphql-tag'; Enabling this feature allows you declare documents of the form fragment SomeFragment ($arg: String!) on SomeType {
someField
} ResourcesYou can easily generate and explore a GraphQL AST on astexplorer.net. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论