Apollo client & Absinthe - difficulty parsing errors

Question

I'm working with the @apollo/client and @absinthe/socket-apollo-link NPM packages in my React app, but I'm having some trouble parsing query and mutation errors received by onError in my implementation of the useQuery and useMutation hooks.

For example, here is the way I've set up a query in my component:

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

When that onError handler is called, the error object that is returned is 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>)

I can break this response into its parts "graphQLErrors", "networkError", "message", "extraInfo", but I'm finding it difficult to get any useful info there. In particular, I'd like to be able to get something out of the message - but in this case, error.message is the string,

request: [object Object]

typeof error.message logs string so yeah I can't really do anything with this.

Maybe I could find something useful under one of the other attributes? Nope, graphQLErrors is an empty array, networkError yields the same output as I got when I logged the initial error above, and extraInfo is undefined.

I dug into the source code and found the method createRequestError - when I added a debug log here to see what the message was, I good some good data - I could see the message that I would think would be available somewhere in the error response:

var createRequestError = function createRequestError(message) {
  return new Error("request: ".concat(message));
}.bind(undefined);

What could be causing this issue? Is there something I need to configure in my Apollo/Absinthe initialization? I've set those up like so:

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
        })
    )
);

Thanks much for any insight!

Apollo client & Absinthe - difficulty parsing errors

0 Answers0