Difficulty parsing hook errors in onError handler

[darrenklein]

Intended outcome:

Given this useQuery hook in my React app:

    useQuery(myQuery, {
        fetchPolicy: "network-only",
        onCompleted: ({ myData }) => {
            setData(myData)
            setLoading(false)
        },
        onError: (error) => {
            console.log(error)
        }
    })

I expect that the onError handler for the useQuery hook will provide an error that I can parse into meaningful data describing the error - especially the message field.

Actual outcome:

When logging the full error object itself, I see the object logged as

Error: request: [object Object]
    at new ApolloError (app.js:36358)
    at app.js:146876
    at app.js:145790
    at new Promise (<anonymous>)
    at Object.error (app.js:145790)
    at notifySubscription (app.js:145130)
    at onNotify (app.js:145169)
    at SubscriptionObserver.error (app.js:145230)
    at app.js:58209
    at Array.forEach (<anonymous>)

which seems fine - however, its individual fields are somewhat useless. For example, the message field is a string, request: [object Object], which I can't get any meaningful data from.

I dug into the source code a bit, and was looking at the createRequestError function and added a debug log there to check out that function's message argument, and there I can see content that I'd expect to be able to access in onError - I get an object with an errors array, like so:

{
  errors: [
    {
      message: "Variable `$foo` of type `String` found as input to argument of type `ID`."
    }
  ]
}

So my question is, why is it that the argument I receive in onError seems to be somewhat unparseable (I can break it out into graphQLErrors, networkError, message, extraInfo, but anything further seems to be unusable)? How can I get access to the useful message I see in createRequestError?

How to reproduce the issue:

Here's a close approximation of my configuation -

apollo-client.js

import { ApolloClient, InMemoryCache } from "@apollo/client"
import absintheSocketLink from "./absinthe-socket-apollo-link"

export default new ApolloClient({
    link: absintheSocketLink,
    cache: new InMemoryCache()
})

absinthe-socket-apollo-link.js

import * as AbsintheSocket from "@absinthe/socket"
import { createAbsintheSocketLink } from "@absinthe/socket-apollo-link"
import { Socket as PhoenixSocket } from "phoenix"

const protocol = window.location.protocol === "https:" ? "wss" : "ws";
const getToken = () => JSON.parse(window.localStorage.getItem("token"))

let token = getToken();

const params = {
    get jwt() {
        if (!token) {
            token = getToken();
        }

        return token;
    },
};

export default createAbsintheSocketLink(
    AbsintheSocket.create(
        new PhoenixSocket(`${protocol}://${WS_API_URL}/graphql`, {
            reconnect: true,
            params: params
        })
    )
);

In my component, I have the hook set up like so:

import { useQuery, useMutation } from "@apollo/client"
import gql from "graphql-tag"

const myQuery = gql`query ($foo: String!) {
  someData (foo: $foo) {
    id
    name
  }
}
`

const MyComponent = () => {
    useQuery(myQuery, {
        fetchPolicy: "network-only",
        onCompleted: ({ myData }) => {
            setData(myData)
            setLoading(false)
        },
        onError: (error) => {
            console.log(error)
        }
    })
}

Versions

  System:
    OS: macOS 11.0.1
  Binaries:
    Node: 8.9.4 - ~/.nvm/versions/node/v8.9.4/bin/node
    npm: 5.7.1 - ~/Documents/circles/tangent/assets/node_modules/.bin/npm
  Browsers:
    Chrome: 89.0.4389.128
    Edge: 90.0.818.39
    Firefox: 87.0
    Safari: 14.0.1
  npmPackages:
    @apollo/client: ^3.3.7 => 3.3.7 

[jcreighton]

Hi @darrenklein! I'd like to help but I'm not sure I understand the question. Where are you seeing createRequestError? What you're receiving in onError is an instance of ApolloError which you can see contains graphQLErrors, networkError, message and extraInfo. All of these can be access with dot notation: error.message. I'm unsure what other information you want to access so let me know what context I'm missing!

[darrenklein]

@jcreighton thank you so much for getting back to me about this. I actually just discovered that this is not an apollo-client issue, it's an absinthe/socket issue - absinthe-graphql/absinthe-socket#29

Your hard work and attention are much appreciated.