GraphQL @defer directive

Get Help and Help Others
1

Hi,
I am just going through the newer GraphQL features trying to optimize some queries. Now I wanted to try the @defer directive, but it seems documentation on it is incomplete and the given example does not seem to work:

Here is my Query:

export const QUERY: TypedDocumentNode<FindFastAndSlowQuery, FindFastAndSlowQueryVariables> = gql`
  query FindFastAndSlowQuery {
    ... on Query @defer {
      slowField
    }
    fastField
  }
`

and this is my sdl:

export const schema = gql`
  type Query {
    """
    A field that resolves fast.
    """
    fastField: String! @skipAuth

    """
    A field that resolves slowly.
    Maybe you want to @defer this field ;)
    """
    slowField: String @skipAuth
  }
`

I get this errors in my console

api | 09:24:14 🚨 graphql-server Unknown directive "@defer".

Also when trying to generate types, it crashes

Generating...

/path/to/node_modules/@redwoodjs/internal/dist/gql.js:57
      [field.name.value]: []
                  ^

TypeError: Cannot read properties of undefined (reading 'value')
    at getFields (/path/to/node_modules/@redwoodjs/internal/dist/gql.js:57:19)

This is here:

const getFields = (field) => {
  if (!field.selectionSet) {
    return field.name.value;
  } else {
    const obj = {
      [field.name.value]: [] // error points to this line
    };

Even if I leave out the @defer but keep the spread operator ... on Query the type generation fails. But if I leave out the spreading, then it works of course.

@dthyresson maybe you have an idea, since I think this was documented and implemented by you? Let me know, if you need more information.

2

I somehow got around the Unknown directive part. I checked realtime.ts again and restarted server.

Now graphql returns somthing that looks good, but it seems Apollo does not read it correctly.

Error: JSON.parse: unexpected non-digit at line 2 column 2 of the JSON data

Response

---  // i think apollo refers to this line 2 column 2?!
Content-Type: application/json; charset=utf-8
Content-Length: 65

{"data":{"fastField":"I am fast"},"hasNext":true,"extensions":{}}
---
Content-Type: application/json; charset=utf-8
Content-Length: 115

{"incremental":[{"data":{"__typename":"Query","slowField":"I am slow"},"path":[]}],"hasNext":false,"extensions":{}}
-----

This somehow has to do with apollo not being ale to use multipart?

3

It seems defer is only supported by apollo client in graphql v17 alpha 2?

I think redwood is currently running on v16. So defer might not yet be supported?!

4

Just to double down real quick here: this is about the server version, not the client version.

@defer is an experimental GraphQL feature that is only available in graphql 17 pre-releases, and AC only supports the transport protocol that servers on alpha 2 speak.

2 Likes