Docs
Launch GraphOS Studio

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 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 . file (same way you'd import modules in JS).

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

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

© 2024 Apollo Graph Inc.

Privacy Policy

Company