A quick look into the Apollo Server code and the Playground code, there seems no configuration to inject a script that runs in the browser. While not being sure if there’s a recommended way for this, I try to patch it.

The example code

Here is the code based on the Apollo Server tutorial. It simply adds a string in HTML.

const { ApolloServer, gql } = require('apollo-server-express');

const express = require('express');

const interceptor = require('express-interceptor');



const typeDefs = gql`

type Query {

"A simple type for getting started!"

hello: String

}

`;



const resolvers = {

Query: {

hello: () => 'world',

},

};



const server = new ApolloServer({

typeDefs,

resolvers,

});



const app = express();

const port = process.env.PORT || 3000;



const SCRIPT_TO_INJECT = `

<script>

window.addEventListener('load', () => {

console.log('script injected');

const store = window.s;

setTimeout(() => {

const headers = '{"Authorization": "Bearer token"}';

store.dispatch({ type: 'EDIT_HEADERS', payload: { headers } });

}, 2000);

});

</script>

`;

const END_BODY = '

</body>

</html>';

app.use(interceptor((req, res) => ({

isInterceptable: () => /text\/html/.test(res.get('content-type')),

intercept: (body, send) => {

send(body.replace(END_BODY, SCRIPT_TO_INJECT + END_BODY));

},

})));



server.applyMiddleware({ app });



app.get('/', (req, res) => {

res.redirect(server.graphqlPath);

});



app.listen(port, () => {

console.log(`Open http://localhost:${port}${server.graphqlPath}`);

});

What is nice here is that Playground exposes the Redux store as window.s . Notice the string replacement is not robust and if Playground changes the spaces in HTML, it won’t work.

How to run

You can check out the GitHub repository and run this example.

You can also run it in codesandbox.

(Until now, I didn’t realize that CodeSandbox is capable to run Apollo Server. How nice!)

Final notes

As I noted, this is just a workaround at the point of writing. I’m pretty sure this is not what we want and would like to look for a recommended solution.