Version

v4.0.1-rc.5

Reproduction link

https://codesandbox.io/s/recursing-fire-yf046?file=/pages/index.vue

Steps to reproduce

The reproduction link is a simple Nuxt project with @nuxt/apollo and graphql-tag dependencies.

The demo page use a smart query and the fetch() method.

What is expected ?

The page component should render normaly.

What is actually happening?

The page quickly flash before the error Cannot set property character of #<Object> which has only a getter pops.

Additional comments?

This comment indicate that when a component is mounted, vue-apollo will check if there is already a data property for every smart query or not. If not, it will create a property with a getter-only, which returns an internal property. and in their case, as the method was called many times, the subsequents calls made Vue-Apollo try to reassign a value to the getter-only property.

Maybe the issue is similar here, with Apollo-Vue making a query two times (using fetch(), even empty, trigger a second query ?!)

Maybe linked with https://cmty.app/nuxt/apollo-module/issues/c308

Version

v4.0.1-rc.1

Reproduction link

https://not-available.com

Steps to reproduce

• install nuxt-apollo and add a basic apollo-config.js in plugins
• install nuxt-vite and attach it in build modules
• run npm run dev

What is expected ?

nuxt-vite dev server starts normally.

What is actually happening?

Getting a blocking error that blocks compilation, app doesn't even build when using nuxt-vite and nuxt-apollo together in the same project.

Additional comments?

Would be great if nuxt-apollo was compatible with nuxt-vite, if I was able to submit a PR for this I would, for now I'll have to settle for submitting this issue and hope that someone else takes care of this.

Much appreciated, thank you.

When trying to fire up the nuxt dev server using nuxt-vite, there seems to be a blocking error with the nuxt-apollo plugin regarding a require statement that is being used in the module source code.

Would be great if this was nuxt-vite compatible, if I was able to submit a PR for this I would, for now I'll have to settle for submitting this issue and hope that someone else does.

I am currently using it like this:

@Component<Index>({
        components: {
                Card
        },
        apollo: {
                donates: {
                        query: DONATES_QUERY,
                        variables: {
                                skip: 0,
                                take: take,
                                search: "",
                                sortBy: "HOT",
                                donatorId: null
                        },
                        prefetch: true,
                },

                donator: {
                        query: DONATOR_QUERY,
                        variables: {
                                id: null                        },
                        prefetch: true,
                }

        }
})


export default class Index extends Vue {
        private donates: CardData[] = [
        ]
        private donator: Donator = {name: "", amountDonated: 0, donationCount: 0, score: 0}
...
}

However, it seems impossible to access this (i want this.$route.params.something) in the component declaration in the id field where null currently is.

So how do I do that?

I'm unsure if this is a bug or me missing some configuration to get @nuxtjs/apollo to refresh the page's data with SSR.

I'm using "@nuxtjs/apollo": "^4.0.1-rc.5" with "nuxt": "^2.14.12".

In dev mode I have no issues, my page data is correctly fetched, and if I change some of its data on my API and then reload the page, the data gets updated.

Nuxt is set to target the server, so it's not building static files.

When I'm in SSR with nuxt build && nuxt start I have the page displays the right data, so SSR seems to work. However, if I edit my API's data and then reload the page I don't get the page content updated but rather the version I had when I ran nuxt start.

If I restart the application and reload the page, I have the right updated data show up.
I feel like this might be a caching-related issue.

Here's my apollo config that gets loaded into Nuxt:

import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory'
import introspectionQueryResultData from './graphql.schema.json'

const fragmentMatcher = new IntrospectionFragmentMatcher({
  introspectionQueryResultData
})

const cache = InMemoryCache({ fragmentMatcher })

export default function (ctx) {
  return {
    httpEndpoint: MY_ENDPOINT,
    cache
  }
}

I need the Fragment Matcher in order to use GraphQL fragments and generate the types with codegen. This works like a charm in dev but might be the reason why it doesn't work in SSR even though I don't understand why.

On my Vue component to render my page here's my configuration:

apollo: {
  page: {
    prefetch: true,
    query: queryPage, // GraphQL query with .gql file
    variables() {
      return {
        id: 2
      }
    }
  }
}

I do not understand why my server isn't refetching the data after being started. I tried to debug by using Apollo Client Devtools but couldn't get it to show up in server mode. I couldn't find a way either to force it connectToDevTools: true in the apollo config, it looks like it's not taken into account.

How can I get my page to fetch the data when loaded, without having to restart the application after each update on my API's content?

Thanks,
Aurélien

I have a query with a subscribeToMore that updates every time a new value is added. By default the query was being prefetched by the server with SSR and then when the client loads it would connect to the websocket for any updates after that. The issue I was running into was that there is a gap between when the server prefetches the results and when the client connects to the websocket so if any new items were added in that window the client would miss them. The fix was simply to set prefetch:false on the query however I thought this would be a common issue to run into and thought that the apollo module should probably account for this. It seems like generally prefetching any query with a subscribeToMore is a bad idea unless you are going to do another query in the client after they have established their websocket connection to cover any gaps.

Version

v4.0.1-rc.1

Reproduction link

https://codesandbox.io/s/nuxt-apollo-module-token-name-bug-ym7pn

Steps to reproduce

1. Create a Nuxt project;
2. Install the module;
3. Configure 2 different clients;
4. Use a custom tokenName value per-client.

What is expected ?

It should create differents cookies per-clients.

What is actually happening?

Create only one cookie used by all the clients, with the name 'apollo-token'.

Additional comments?

The version i'm using is the 4.0.1-rc.5, but it's not present in the list.

From the generated file .nuxt/apollo-module.js:

  const AUTH_TOKEN_NAME = 'apollo-token';
  const defaultTokenName = ''  || AUTH_TOKEN_NAME;
  const authTokenName = ''  || AUTH_TOKEN_NAME;

  cookies.set( AUTH_TOKEN_NAME, token, cookieAttributes );
  cookies.remove( AUTH_TOKEN_NAME, cookieAttributes );

Every cookie / name is based on the default value and not from the provided tokenName per-client.

i am try use modify, identify methods after mutate…but i get error "xxx not a funtion"
I am using writeData instead but on the apollographql homepage they say "client | cache.writeData has been completely deleted."

const {
          data: { replyParaComment }
        } = await this.$apollo.mutate({
          mutation: REPLY_PARA_COMMENT,
          variables: {
            commentID: this.comment.id,
            content: this.content,
            image: this.image
          },
          update: (store) => {
            // store.modify => undefined function
            console.log(store.identify(this.comment))
            const newComment = Object.assign({}, this.comment)
            newComment.countReply++
            store.writeData({
              id: this.comment.__typename + ':' + this.comment.id,
              data: newComment
            })
      }
})

about modify and identify method here: https://www.apollographql.com/docs/react/caching/cache-interaction/#cachemodify

Version

4.0.1-rc.5

Reproduction link

https://codesandbox.io/s/apollo-nuxt-ex-1-xqrtg

Steps to reproduce

Reload page or build and run es-check es5 .nuxt/dist/client/*.js.

What is expected ?

No error "cannot redefine property: $apollo" and es5 compatibility on build pack.

What is actually happening?

Error or no es5 compatibility.

Additional comments?

Without transpile, es-check throw error. With transpile I have the error "cannot redefine property: $apollo" :/. I don't know if it's @nuxtjs/apollo or vue-apollo problem so first I try here :).

I have a mutation that should upload a file but doesn't. The attchment size is bigger than what the 'Network' tab shows, so the picture must not be in the POST.

Full source tree at question commit: https://github.com/jrcichra/loxodonta/tree/5b463103b3e3902b16fb259d8e852cf8c24765f0
You can recreate the problem with docker-compose build && docker-compose up and go to http://localhost:3000. Pick a file and look at the network tab.

Form:

        <b-form inline @submit="newFile">
          <b-form-file v-model="form.attachments" accept=".jpg, .png, .gif">
          </b-form-file>
          <b-button type="submit" class="postbutton">Post</b-button>
        </b-form>

data():

  data() {
    return {
      username: "Justin",
      placeholder: "What's on your mind?",
      form: {
        text: "",
        attachments: [],
      },
    };
  },

Method:

    async newFile(event) {
      event.preventDefault(); //Don't submit the page
      var file = this.form.attachments;
      if (file) {
        console.log(file);
        try {
          await this.$apollo
            .mutate({
              mutation: newfile,
              variables: {
                file,
              },
            })
            .then(({ data }) => console.log(data));
        } catch (e) {
          console.error(e);
        }
      } else {
        console.error("attachments were not defined but newFile was called");
      }
    },

Mutation client-side:

mutation newFile($file: Upload!) {
    newFile(file: $file) {
        filename
        mimetype
        encoding
    }
}

nuxt.config.js:

    apollo: {
        clientConfigs: {
            default: {
                httpEndpoint: 'http://localhost:3001/graphql',
            }
        }
    },

According to https://github.com/nuxt-community/apollo-module/issues/259, apollo-upload-client is already implemented. What am I missing? Thanks.

Screenshots:

I have set up the default client config with a full https url as the httpEndpoint. However, in the production build, queries in methods seem to use a relative path to /graphql which results in a 404. The strange thing is, these methods work fine in the development build. Smart queries, work fine in all builds.

Here is one of my methods:

getEntry(slug) {
        const apolloClient = this.$apolloProvider.clients.defaultClient; // This gets the default client
        console.log(apolloClient); // this successfully returns the default client, so no error here
        this.loading = true;
        const variables = {
            slug:slug,
            site:this.$i18n.locale
        }
        return new Promise((resolve, reject) => {
            apolloClient.query({
                query:GET_ENTRY,
                variables:variables
            }).then(({data}) => {
                this.entry = data.entry;
                this.loading = false;

            }).catch(err => {
                this.error = "Sorry, we can't find that article";
                console.log(err);
                this.loading = false;
            })
        });
    }

Here is my default client. config

import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
import schema from './schema.json';
const fragmentMatcher = new IntrospectionFragmentMatcher({
    introspectionQueryResultData: schema
  })

export default ({req, app}) => {
    const token = process.env.GRAPHQL_TOKEN
    // let headersVal = {
    //     'Accept-Language': app.i18n.locale 
    // }
    return {
        httpEndpoint:'https://api.madefair.org/graphql',
        getAuth: () => `Bearer ${token}`,
        cache: new InMemoryCache({ fragmentMatcher }),
    }
}

The error I get is as follows:

POST https://stage.madefair.org/graphql 404

384b416.js:1 Error: Network error: Unexpected token < in JSON at position 0

Notice that the url it is attempting to query is not the url in the http Endpoint. so it seems to have used a relative url of just graphql and appended it to the current client url. where is it generating this from?

I am assuming the unexpected token error is just because its html returned from a 404, rather than json.

Is there any solution to access ApolloClient provided by@ nuxtjs / apollo-module, if this is not available? This is e.g. the case in Vue-Routers beforeRouteEnter.

I think its a common use case to do an api request before a route is loaded, to decide if the route is valid or a 404 should thrown.

Version

v4.0.1-rc.5
@nuxtjs/[email protected]
@vue/[email protected]

Reproduction link

https://github.com/SuddenlyRust/nuxt-apollo-composition-api

Steps to reproduce

yarn install

yarn dev

Visit http://localhost:3000/

What is expected ?

Working application without error message.

What is actually happening?

Following error shown: Cannot read property '_apolloAppTracking' of undefined

Additional comments?

Downgrading to @nuxtjs/[email protected] does fix it!

What problem does this feature solve?

Hook asyncDate({error}){…} has the option to handle errors with redirection to the error page that works fine in client-side and server-side.

For Appollo Smart Queries it seems like we have no options to do that on server side
We have this problem from 2017 (ex. https://github.com/nuxt-community/apollo-module/issues/42) but it seems like we have no solution for smart query and have to use code like

async asyncData({error, app, params}){
  const article = await app.apolloProvider.defaultClient.query({
    query: `someGql`,
    variables:{id: params.id}
  }).then(({data}) => data && data.Article)
  if(!article){
    return error({statusCode: 404, message: 'Not found'})
  }
  return {article}
}

but Smart Query is a much more elegant solution and gives many benefits.

What does the proposed changes look like?

apollo: {
    queryName: {
        query: someGql,
        update: (data) => data.allPets,

        error({ errorData, redirect }) {
            const statusCode = errorData.networkError.statusCode;
            if(statusCode = 404){
                redirect('/404')
            }
        },
    },
},

It seems like the error hook inside Smart Queries has no option to make redirection to the 404 page that works fine on the client-side and server-side as well.

In 2017 we have a simular question Unable to use Nuxt's error/redirect functionality when a query failed · Issue #42

But at that moment the only solution was to use asynData({error})

Do we have any changes in 2021?

Smart Query looks like a much more elegant solution than code like

async asyncData({error, app, params}){
  const article = await app.apolloProvider.defaultClient.query({
    query: `someGql`,
    variables:{id: params.id}
  }).then(({data}) => data && data.Article)
  if(!article){
    return error({statusCode: 404, message: 'Not found'})
  }
  return {article}
}

Version

v4.0.0-rc.5

Reproduction link

https://github.com/sgarcia-dev/error-apollo-client-nuxt/tree/nuxt-apollo-error-handling

Steps to reproduce

• Clone the project located at https://github.com/sgarcia-dev/error-apollo-client-nuxt/tree/nuxt-apollo-error-handling (notice its the nuxt-apollo-error-handling branch)
• Run npm install
• Run npm run dev
• Go to localhost:<port> (logged to the console, likely localhost:3000)
• Page render crashes with this stack trace on the terminal:

Response not successful: Received status code 400

  at new ApolloError (node_modules/apollo-client/bundle.umd.js:92:26)
  at node_modules/apollo-client/bundle.umd.js:1486:27
  at runMicrotasks (<anonymous>)
  at processTicksAndRejections (node:internal/process/task_queues:94:5)

What is expected ?

That the smart query error handler, or nuxt config error handler, catch the error, and allow the page render to render with a fallback value when network errors happen. Be it that the server is down, or that it responds with a mismatching HTML response that yield the common Unexpected token < in JSON at position 0 error.

What is actually happening?

page render crashes, and we have no way of doing anything with the error beyond logging it to the console using supported Vue apollo error handler, and nuxt apollo global error handler.

Additional comments?

The only way to handle error in a way we can silence it or deal with it at this time, is hooking up afterware to apollo client directly using apollo-link-error like in this branch/file of the repo;
https://github.com/sgarcia-dev/error-apollo-client-nuxt/blob/master/apollo/apollo-link-error.js

However, while this works (even though its not documented in the @nuxt/apollo docs), this causes a nuxt hydration issue: The client-side rendered virtual DOM tree is not matching server-rendered content. , which throws a white screen on production mode.

Also, you can find a Stack Overflow in depth question I wrote with the things we tried to silence these errors;
https://stackoverflow.com/questions/66029623/how-to-handle-apollo-client-errors-crashing-page-render-in-nuxt

I can see from package.json that this uses vue-apollo 3.x which I think only supports Apollo Client 2. Is it possible to make this package use Apollo Client 3 or is that a feature request?

Is there an option to use HTTP only?