ApolloError: Internal server error

Help
1

Hello! I’m upgrading from Vue 2 to 3. We were using Apollo packages that are now depreciated and had to upgrade and I’m struggling with just the most basic of setup. I think my client setup is wrong. Here’s what I got. Using @apollo/client 3.8.1 and @vue/apollo-option 4.0 beta.

In main.js

import { createApolloProvider } from '@vue/apollo-option'
import { ApolloClient, InMemoryCache } from '@apollo/client/core';

export const AUTH_TOKEN = 'apollo-token'
const httpEndpoint = 'http://localhost:3000/graphql'

// Create the apollo client
const apolloClient = new ApolloClient({
  uri: httpEndpoint,
  cache: cache,
  resolvers: localResolvers, 
  typeDefs: localSchema,
  // ssrMode: false
});

export function createProvider(options = {}) {
  const apolloProvider = createApolloProvider({
    defaultClient: apolloClient,
    errorHandler(error) {
      console.log(error);
    },
  })

  return apolloProvider;
}

localResolvers contain this:

export default {
  Mutation: {
    setConnectedMutation: (root, { value }, { cache }) => {
      const data = {
        connected: value
      }
      cache.writeData({ data })
    },
    // ... more resolver mutations
  }
}

and localSchema:

import gql from 'graphql-tag'

export default gql`
  type Package {
    to: String!
    from: String!
  }
  type Page {
    id: String!
    name: String!
  }
  type Query {
    appName: String
    connected: Boolean!
    delivery: Package!
  }
  type Mutation {
    setConnected(value: Boolean!): Boolean
  }
`

I have tried the client with just the cache and link but it doesn’t work. I get this error each time.

ApolloError: Internal server error
    at new ApolloError (index.js:26:1)
    at eval (QueryManager.js:648:1)
    at both (asyncMap.js:16:1)
    at eval (asyncMap.js:9:1)
    at new Promise (<anonymous>)
    at Object.then (asyncMap.js:9:1)
    at Object.eval [as next] (asyncMap.js:17:1)
    at notifySubscription (module.js:132:1)
    at onNotify (module.js:176:1)
    at SubscriptionObserver.next (module.js:225:1)

which is getting fired in the createProviders. That’s it on errors. I was hoping it would give me something else but nothing.

2

So I figured it out after a couple more weeks. I hope this helps someone else. I needed to add an auth middleware to the client with the link.

const authMiddleware = new ApolloLink((operation, forward) => {
    // add the authorization to the headers
  const token = localStorage.getItem(AUTH_TOKEN);
    operation.setContext({
      headers: {
        authorization: token ? `Bearer ${token}` : "",
      },
    });
    return forward(operation);
});

// Create the apollo client
const apolloClient = new ApolloClient({
  link: concat(authMiddleware, httpLink),
  cache: cache,
  resolvers: localResolvers, 
  typeDefs: localSchema,
  connectToDevTools: true,
  //ssrMode: false,
  onCacheInit: cache => {
    const data = localState
    cache.writeData({ data })
  },
})