apollo: Cannot stringify POJOs with symbolic keys on nuxt 2

Version

v4.0.0-rc.2

Reproduction link

https://github.com/nuxt-community/apollo-module

Steps to reproduce

I get this error after update nuxt 2.0.0 to 2.1.0, revert back to 2.0.0 still geting the problem. It’s happen on my both 2 project when return the value that query by apollo in asyncData:

  async asyncData({ error, app, params }){
    const post = await app.apolloProvider.defaultClient.query({
      query: postQuery,
      variables: { slug: params.slug }
    }).then(({ data }) => data && data.post)

    if (!post) return error({ statusCode: 404, message: 'Not found!!' })
    
    return { post }
  },

Nuxt 1.4.2 is working normally, anyone have the same problem? Another weird thing, on codesanbox, nuxt 2.1.0 still working.

What is expected ?

Shouldn’t get error.

What is actually happening?

Getting error.

<div align="right">_{This bug report is available on Nuxt community (#c145)}</div>

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 2
Comments: 15 (12 by maintainers)

Most upvoted comments

I ran into this error this morning when attempting to upgrade to Nuxt 2.1. After some investigating, I was able to get it to work by cloning the Apollo response. I typically do this anyway due to how Apollo returns data as read-only, but this one particular page returning the error was one area I wasn’t cloning. Here’s an example:

Throws error in Nuxt 2.1:

let client = app.apolloProvider.defaultClient
try {
  let { data } = await client.query({ query: USER_QUERY })
  Object.assign(store.state.user, data.user)
} catch (err) {
  // handle error
}

Works in Nuxt 2.1:

Object.assign(store.state.user, _.clone(data.user))

Note: lodash is used here, but there are other ways to “clone” responses worth investigating for your wants/needs.

I haven’t yet diagnosed exactly what causes this, but it seems more to do with Nuxt than it does Apollo (and/or vue-apollo). Rather, it seems Nuxt is using the devalue module; which doesn’t like symbolic keys (which happened to be returned from Apollo).

I don’t know why/where Nuxt is using the devalue module. I also think it’s probably wise for Nuxt to catch the error and throw a warning in this case, rather than letting devalue throw the error uncaught.

I would exercise caution if Nuxt has systemic issues with read-only or symbolic keys.

If I find out more about this, I’ll post back here.

bjunc on Oct 3, 2018

@dohomi yeah, after I switched to deep-clone in my code it started to work as expected. Thank you.

AndrewBogdanovTSS on Oct 8, 2018

@kieusonlam apollo-module is currently not prepared for Nuxt v2 yet. There are currently opened issues with vue-apollo and I’m not sure whats the right way to circumvent the current situation. You can follow #158 where I started to upgrade but I’m kind of stuck currently with SSR compatibility. Beside that I also don’t have a Nuxt v2 project in place to run. Please feel free to contribute in the PR or open a PR for just for compatibility reasons for v2

dohomi on Oct 1, 2018