Cannot read property 'freezeResults' of null

[bswank]

I used the Vue CLI (v3.2.1) to create a new project; I added Apollo with vue add apollo(tried v3.0.0-beta.30, v3.0.0-beta.11, and a few others) and I started my dev server:

Cannot read property 'freezeResults' of null

[danrocha]

Same started to happend with me after I upgraded. I now have the following versions, and cannot load my application anymore:

"vue-cli-plugin-apollo": "^0.20.0",
"vue-apollo": "^3.0.0-beta.30",

It worked back when I overrode the default cache with:

import { InMemoryCache } from 'apollo-cache-inmemory';

const defaultOptions = {
  // ...
  // Override default cache
  cache: new InMemoryCache(),
}

Not sure if this is the right solution, though.

[txbo]

I created a new project and upgraded to the last vue-apollo version, the problem still exists.

[bswank]

I was also able to get it to work with cache: new InMemoryCache({ freezeResults: false }).

[danrocha]

It seems you don't need to add any options in new InMemoryCache() as freezeResults is default to false when you create it. (see https://github.com/apollographql/apollo-client/blob/master/packages/apollo-cache-inmemory/src/inMemoryCache.ts)

[liornoy]

I was also able to get it to work with cache: new InMemoryCache({ freezeResults: false }).

can you be more specific as for where to enter this code in my project?

[bswank]

@liornoy Check out https://bitbucket.org/briansw/hu-tech-challenge-vue/src/master/src/vue-apollo.js and specifically, line 42. This is the Apollo config – you can get this scaffolding set up in your Vue app by running vue add apollo.

[liornoy]

Thanks for the link, it solved it for me.
Adding "cache: new InMemoryCache({ freezeResults: false })" wasn't enough,
I just copy-paste the whole vue-apollo.js and changed:
const httpEndpoint =
process.env.VUE_APP_GRAPHQL_HTTP || 'http://localhost:4002/graphql'
from 4002 to 4000.

[fogelfish]

I came upon this thread while trying to solve problems with a sample hasura application, vuejs-auth0-graphql at https://github.com/hasura/graphql-engine/tree/master/community/sample-apps/vuejs-auth0-graphql/app . In Firefox the error was "TypeError: config is null". In Chrome it was "Cannot read property 'freezeResults' of null".

After adding import { InMemoryCache } from 'apollo-cache-inmemory'; and cache: new InMemoryCache(), to vue-apollo.js, I get a new error:

GraphQL error: Missing Authorization header in JWT authentication mode

I'm too new to this to know exactly what's happening, but I'm wondering if the JWT is not getting stored properly, or can't be found, as a result of the above edits, because this assignment result is null.

const token = localStorage.getItem('apollo-token')

My project package.json has "vue-apollo": "^3.0.0-beta.11", "vue-cli-plugin-apollo": "^0.19.2", and "vue": "^2.6.2" and vue CLI is 3.8.2. I don't know if this is the right place to ask this, but I'm grasping at straws as it is.

[bswank]

@fogelfish This is a different issue, but happy to help! Once you've "signed in" or stored the JWT somehow, check local storage to see if it's in there. If it is, then try storing something arbitrary in local storage and retrieving that to ensure you're retrieving successfully.

[fogelfish]

I'm sorry I didn't update my comment here yesterday. I realized what you've pointed out, @bswank, that I had to login first to see the JWT. I didn't expect the console to show any errors on first page load and therefore I was stuck on solving a problem that didn't really exist. In hindsight I see that this is a sample app. Its purpose is to demonstrate the small piece of the stack and that's all.

I'm curious if in a more fully realized app it would be desirable to log an error in the console before any attempt to log in? Would it be valid to try to access to the hasura server in case the session was still logged in from earlier? Or to make use of a refresh token? I am, as you can see, still just getting to grips with all this.

[bswank]

No worries, @fogelfish! Thanks for the update. The important thing is that you think through what your user might actually want to accomplish and then build for that. So, in the case that you have data stored in your database that should be accessed by a user who is not logged in, you'd want to figure out how to make a request to your server without a JWT and ensure your app allows that. This would be, for instance, if you have data like a blog post.

In the case that all users making server requests should be authenticated, then you would always send the JWT along with the request (except when you're actually authenticating). In that case, when a logged-in user returns to the page, the JWT will still be available in LocalStorage or the user is logged out. Hope that helps!

[Akryum]

Duplicate of #630