How to use 15.4.0-experimental-stream-defer.1 @defer directive?

[gabbigum]

Hi, all. I'm not sure what steps I need to take in order to make @defer work. I've setup this bare minimum express-graphql server:

var express = require('express');
var { graphqlHTTP } = require('express-graphql');
var { buildSchema } = require('graphql');

// Construct a schema, using GraphQL schema language
var schema = buildSchema(`
  type Query {
    hello: Greeting
  }

  type Greeting {
    text: String
    textList: [String]
  }
`);

// The root provides a resolver function for each API endpoint
var root = {
   hello: () => {
       return { text: 'Hello World', textList: ['Hi', 'Wow'] } 
    },
};

var app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));
app.listen(4040);
console.log('Running a GraphQL API server at http://localhost:4040/graphql');

And I am executing such query:

hello {
  text
  ... on Greeting @defer {
    textList
  }
}

And I get such response:

{}

What I am missing and how can I make it work? I know it's experimental feature and still in development that's why I am not expecting it to work perfect. Thanks in advance!

[saihaj]

For defer and stream to work you need a multipart response setup. Checkout @n1ru4l bleeding edge platground https://github.com/n1ru4l/graphql-bleeding-edge-playground/blob/be4ca50be9f99a67029e53070289398c12f82679/server/main.ts#L82

[gabbigum]

Hi, again. I managed to setup my @defer example app, for both client side and server side. Basically the server side stays the same I haven't changed anything. I've tried using meros and fetch-multipart-graphql without any success, so I just tried to use plain node.js and see if I can make it work. I'm posting the code below.

If you wish I could create a PR in the experimental defer/stream branch for express-graphql with example folder containing readme and both client/server examples, so people can experiment with it and it would be great since it'll be my first OSS contribution. Because as trivial as it seems for a person like me who didn't know javascript was a lot of trouble to get all of this working. 😄

import http from 'http';

const data = `query defer_test {
  deferTest {
    text
    ... on GraphQLDeferTest @defer {
      defferedText
    }
  }
}`

const options = {
  hostname: 'localhost',
  port: 4040,
  path: '/graphql',
  method: 'POST',
  headers: {
    'Content-Type': 'application/graphql',
    'Content-Length': Buffer.byteLength(data)
  }
};

const req = http.request(options, (res) => {
  console.log(`STATUS: ${res.statusCode}`);
  console.log(`HEADERS: ${JSON.stringify(res.headers)}`);
  
  res.setEncoding('utf8');

  res.on('data', (chunk) => {
    console.log(`BODY: ${chunk}`);
  });

  res.on('end', () => {
    console.log('No more data in response.');
  });
});

req.on('error', (e) => {
  console.error(`problem with request: ${e.message}`);
});

// Write data to request body
req.write(data);
req.end();

[saihaj]

Awesome! yes please PR your demo it would be very helpful.

[gabbigum]

I've made the pull request - graphql/express-graphql#784. Thanks @saihaj.

[gabbigum]

Hello, again @saihaj. Can I have my pull request merged? I signed the CLA :) Thanks!

[saihaj]

I currently don't have rights to merge there but pinged people who have. I will try again. Sorry about that 😞