Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

gql-loader

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

gql-loader

GraphQL Loader for Webpack

  • 1.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
253
increased by11.95%
Maintainers
1
Weekly downloads
 
Created
Source

gql-loader

GQL loader allows you to load graphql queries from .graphql into your JS. It also has special syntax to allow importing of other files such as fragments.

Install

npm install -S gql-loader

or

yarn add gql-loader

Config

Add Loader to webpack config

{
  test: /\.(graphql|gql)$/,
  exclude: /node_modules/,
  use: {
    loader: 'gql-loader',
    options: {
      baseDir: path.resolve(`${__dirname}/../src/graphql`)
    }
  }
}
Options
NameDefaultDescription
baseDir<Project Dir>/src/graphqlThe base directory to look for graphql files if using special keywords.

We only use baseDir if you use a shortcut keyword such as fragments/, queries/, or mutations/. If your import / require starts with one of those then we use the baseDir to build absolute path.

How to use

Just require your graphql query file path. require('queries/myQuery.graphql').

#import "fragments/myFragment.graphql"
#import "../fragments/myOtherFragment.graphql"

query MyQuery($myVar: String) {
  test(myVar: $myVar)
      ...myFragment
      ...myOtherFragment
    }
  }
}

As you can see there is special #import syntax at the top of the file. By using #import "my/fragment/path.graphl it will load the file and embed in place of the import statement. You can use relative path from this file, or use one of the special absolute path keywords.

Keywords

FAQs

Package last updated on 29 Jun 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc