Join us from October 8-10 in New York City to learn the latest tips, trends, and news about GraphQL Federation and API platform engineering.Join us for GraphQL Summit 2024 in NYC
Docs
Start for Free

Loading queries with Webpack


You can load queries over .graphql files using Webpack. The package graphql-tag comes with a loader easy to setup and with some benefits:

  1. Do not process GraphQL ASTs on client-side
  2. Enable queries to be separated from logic

In the example below, we create a new file called currentUser.graphql:

query CurrentUserForLayout {
currentUser {
login
avatar_url
}
}

You can load this file adding a rule in your webpack config file:

module: {
rules: [
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: 'graphql-tag/loader',
},
],
},

As you can see, .graphql or .gql files will be parsed whenever imported:

import React, { Component } from 'react';
import { graphql } from '@apollo/react-hoc';
import currentUserQuery from './currentUser.graphql';
class Profile extends Component { ... }
Profile.propTypes = { ... };
export default graphql(currentUserQuery)(Profile)

Jest

Jest can't use the Webpack loaders. To make the same transformation work in Jest, use jest-transform-graphql.

FuseBox

FuseBox can't use the Webpack loaders. To make the same transformation work in FuseBox, use fuse-box-graphql-plugin.

React native

React native can't use the Webpack loaders. To make the same transformation work in React native, use babel-plugin-import-graphql.

Create-React-App

create-react-app can't use the Webpack loaders unless ejected. To make the same transformation work in create-react-app without ejecting, use graphql.macro.

import { loader } from 'graphql.macro';
const currentUserQuery = loader('./currentUser.graphql');

Fragments

You can use and include in . files and have webpack include those dependencies for you, similar to how you would use fragments and queries with the gql tag in plain JS.

#import "./UserInfoFragment.graphql"
query CurrentUserForLayout {
currentUser {
...UserInfo
}
}

See how we import the UserInfo from another .graphql file (same way you'd import modules in JS).

And here's an example of defining the fragment in another .graphql file.

fragment UserInfo on User {
login
avatar_url
}
Previous
Integrating with React Native
Next
Basic HTTP networking
Rate articleRateEdit on GitHubEditForumsDiscord

© 2024 Apollo Graph Inc., d/b/a Apollo GraphQL.

Privacy Policy

Company