Skip to content
Reduce bundle size and bandwidth, while securing your backend by whitelisting valid queries and mutations.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
loader
middleware
test-src
.gitignore
extracted_queries.json
extracted_queries_empty.json
extracted_queries_typename.json
index.js
package-lock.json
package.json
readme.md
webpack.config.js

readme.md

generic-persistgraphql

This project enables persisted graphql queries in a generic way, not tied to any particular GraphQL client, like Apollo. For an outstanding primer on what persisted queries are, check out this blog post

Installation

npm i generic-persistgraphql --save

Why is this project needed

The persistgraphql package is wonderfully simple, and effective. It allows you to automatically create a map of all valid graphql queries in your application; however, the accompanying tools tend to assume you're using a particular graphql client like Apollo.

This project provides you with two simple pieces to accompany persistgraphql: a webpack loader which will take imports from .graphql files, and return you the actual id from the json mapping file; and a Node middleware that will take the graphql query id's that are sent over, and replace them with the actual query from that same json map. In addition to letting you reap the normal benefits of persisted queries, like saving bandwidth and preventing unrestricted query execution, you can do so without needing to pull in the graphql-tag package, or even the query text itself.

How does it work

First, run persistgraphql however you need. For details on how to do so, check out the docs


Then set up the webpack loader

{
  test: /\.graphql$/,
  exclude: /node_modules/,
  use: {
    loader: "generic-persistgraphql/loader",
    options: {
      path: path.resolve(__dirname, "extracted_queries.json"),
      add_typename: true
    }  
  }
}

Loader options

path is the path to the json file persistgraphql created for you.

add_typename is the same as the add_typename option in persistgraphql. If you set it to true there, be sure to set it to true here. Conversely, if you don't set it there, don't set it here.


Then apply the Node middleware

import { middleware } from "generic-persistgraphql";

// do this BEFORE your app.use("/graphql", ....) statement
middleware(app, { url: "/graphql", mappingFile: path.resolve(__dirname, "./react-redux/extracted_queries.json") });

Middleware options

url: Your graphql url.

mappingFile: Path to the json file persistgraphql created for you.

onQueryNotFound: If you'd like to prevent unrestricted query execution, provide a function here which will be called whenever a query or mutation comes over the wire which is not the key to an entry in the json file. It will be called with the Express request, response, and next values. For example

middleware(app, {
  url: "/graphql",
  mappingFile: path.resolve(__dirname, "./extracted_queries.json"),
  onQueryNotFound: (req, resp, next) => {
    return resp.send({ data: { notFound: true } });
  }
});

Now import any queries or mutations you have in .graphql files, and use them as you normally would.

import getTags from "./getTags.graphql";

graphqlClient.runQuery(getTags, { publicUserId: publicUserId }).then(({ data: { allTags } }) => {
  dispatch({ type: LOAD_TAGS_RESULTS, tags: allTags.Tags });
});

The Node middleware will look in req.query.query for GET requests, or req.body.query for POSTS, and see if the value sent over matches an ID in the extracted queries json file. If so, it'll swap the real query in for you. If it's not found, it'll either just send the value along to the normal GraphQL middleware, or call onQueryNotFound if you provided a value for it.

You can’t perform that action at this time.