Activities

ririen

ririen posted a new bug report

apollo-module •

bug Vercel – Nuxt Internal Server Error

Version

v4.0.1-rc.1

Reproduction link

Don't have.

Steps to reproduce

Use package @nuxtjs/vercel-builder and @nuxtjs/apollo to run Nuxt with Vercel.

What is expected ?

Clean run without problems.

What is actually happening?

[GET] /
20:18:39:58
Error Network error: Expected signal to be an instanceof AbortSignalError Network error: Expected signal to be an instanceof AbortSignal ERROR Network error: Expected signal to be an instanceof AbortSignal at new ApolloError (nodemodulesdev/apollo-client/bundle.umd.js:92:0) at server.js:48937:34 at server.js:49357:15 at Set.forEach (<anonymous>) at server.js:49355:26 at Map.forEach (<anonymous>) at QueryManager.broadcastQueries (nodemodulesdev/apollo-client/bundle.umd.js:2004:0) at server.js:48832:29

Ettapp

Ettapp posted a new bug report

apollo-module •

bug Issue when used in combination with `fetch`

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

malkhuzayyim

malkhuzayyim posted a new bug report

apollo-module •

bug nuxt-vite compatibility issue

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.

malkhuzayyim

malkhuzayyim posted a new question

apollo-module •

nuxt-vite compatibility issue

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.

kukosek

kukosek posted a new question

apollo-module •

How to use with class components?

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?

esiao

esiao posted a new question

apollo-module •

Server Side Rendering: Data doesn't get updated after starting the server

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

aullman

aullman posted a new question

apollo-module •

Prefetching queries with a subscribeToMore misses results

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.

LuXDAmore

LuXDAmore posted a new bug report

apollo-module •

bug Apollo tokenName is always the same

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.

dnstylish

dnstylish posted a new question

apollo-module •

How can i use cache.modify method in nuxt-apollo?

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

andig89

andig89 posted a new bug report

apollo-module •

bug ES5 compatibility problem in build pack/cannot redefine property: $apollo

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 :).

jrcichra

jrcichra posted a new question

apollo-module •

Upload mutation - file stream is 0 bytes - file not in POST

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:

Screenshot from 2021-02-22 21-37-44.png
Screenshot from 2021-02-22 21-37-56.png

toddpadwick

toddpadwick posted a new question

apollo-module •

Apollo queries inside methods rather than Smart queries do not seem to use the default client httpEndpoint. Instead they seem to generate a relative path

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.

smonkey72

smonkey72 posted a new question

apollo-module •

How to access ApolloClient where this is not available

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.

SuddenlyRust

SuddenlyRust posted a new bug report

apollo-module •

bug Latest Nuxt Composition API is not working

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

error.png

Additional comments?

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

it-sha

it-sha posted a new feature request

apollo-module •

idea Error/redirection functionality for Smart Queries error hook

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-sha

it-sha posted a new question

apollo-module •

Do we have error/redirection functionality for Smart Queries error hook in 2021?

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}
}
sgarcia-dev

sgarcia-dev posted a new bug report

apollo-module •

bug Network errors crash page render using Apollo Smart Query & Global error handler

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

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

fabis94

fabis94 posted a new question

apollo-module •

Does this support Apollo Client 3?

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?

chadidi

chadidi posted a new question

apollo-module •

Apollo uses `https` even though I specified `http`

Is there an option to use HTTP only?

DaveMuirhead

DaveMuirhead posted a new bug report

apollo-module •

bug Dependency resolution errors installing into new NuxtJS app

Version

v4.0.1-rc.1

Reproduction link

https://discord.com/channels/473401852243869706/507590246070878210/805808885390245908

Steps to reproduce

npx create-nuxt-app nuxt-graphql
cd nuxt-graphql
npm install @nuxtjs/apollo

What is expected ?

Installation of @nuxtjs/apollo into NuxtJS app

What is actually happening?

Dependency resolution errors. I can provide the complete NPM debug log if you want it. This error is also reported by other users today on the #apollo channel of the Nuxt.js Discord server.

Additional comments?

[594][davem: nuxt-graphql]$ npm install --save @nuxtjs/apollo
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN nodemodules/graphql npm WARN peer [email protected]"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected] npm WARN nodemodules/apollo-cache-inmemory
npm WARN peer [email protected]"^1.6.6" from @nuxtjs/[email protected]
npm WARN nodemodules/@nuxtjs/apollo npm WARN 1 more (vue-cli-plugin-apollo) npm WARN 8 more (apollo-client, apollo-link, graphql-tag, …) npm WARN npm WARN Could not resolve dependency: npm WARN peer [email protected]"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0" from [email protected] npm WARN nodemodules/apollo-link-persisted-queries
npm WARN [email protected]"^0.2.2" from [email protected]
npm WARN nodemodules/vue-cli-plugin-apollo npm WARN ERESOLVE overriding peer dependency npm WARN Found: [email protected] npm WARN nodemodules/graphql
npm WARN peer [email protected]"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm WARN nodemodules/apollo-cache-inmemory npm WARN peer [email protected]"^1.6.6" from @nuxtjs/[email protected] npm WARN nodemodules/@nuxtjs/apollo
npm WARN 1 more (vue-cli-plugin-apollo)
npm WARN 8 more (apollo-client, apollo-link, graphql-tag, …)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer [email protected]"^0.10.5 || ^0.11.3 || ^0.12.0 || ^0.13.0 || ^14.0.0" from [email protected]
npm WARN nodemodules/graphql-subscriptions npm WARN [email protected]"^1.1.0" from [email protected] npm WARN nodemodules/vue-cli-plugin-apollo
npm WARN 1 more (apollo-server-express)
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN nodemodules/graphql npm WARN peer [email protected]"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected] npm WARN nodemodules/apollo-cache-inmemory
npm WARN peer [email protected]"^1.6.6" from @nuxtjs/[email protected]
npm WARN nodemodules/@nuxtjs/apollo npm WARN 1 more (vue-cli-plugin-apollo) npm WARN 8 more (apollo-client, apollo-link, graphql-tag, …) npm WARN npm WARN Could not resolve dependency: npm WARN peer [email protected]"^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0" from @apollographql/graphql-language-service-interfac[email protected] npm WARN nodemodules/@apollographql/graphql-language-service-interface
npm WARN @apollographql/[email protected]"^2.0.2" from [email protected]
npm WARN nodemodules/apollo-language-server npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! Found: [email protected] npm ERR! nodemodules/graphql
npm ERR! peer [email protected]"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm ERR! nodemodules/apollo-cache-inmemory npm ERR! peer [email protected]"^1.6.6" from @nuxtjs/[email protected] npm ERR! nodemodules/@nuxtjs/apollo
npm ERR! @nuxtjs/[email protected]"" from the root project npm ERR! [email protected]"^1.6.6" from [email protected] npm ERR! nodemodules/vue-cli-plugin-apollo npm ERR! [email protected]"^0.22.2" from @nuxtjs/[email protected] npm ERR! nodemodules/@nuxtjs/apollo
npm ERR! @nuxtjs/[email protected]"
" from the root project
npm ERR! peer [email protected]"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm ERR! nodemodules/apollo-client npm ERR! peer [email protected]"^2.0.0" from [email protected] npm ERR! nodemodules/vue-apollo
npm ERR! [email protected]"^3.0.5" from @nuxtjs/[email protected]
npm ERR! nodemodules/@nuxtjs/apollo npm ERR! @nuxtjs/[email protected]"" from the root project npm ERR! [email protected]"^2.6.10" from [email protected] npm ERR! nodemodules/vue-cli-plugin-apollo
npm ERR! [email protected]"^0.22.2" from @nuxtjs/[email protected]
npm ERR! nodemodules/@nuxtjs/apollo npm ERR! @nuxtjs/[email protected]"" from the root project
npm ERR! 7 more (apollo-link, graphql-tag, vue-cli-plugin-apollo, …)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer [email protected]"^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0" from @apollographql/[email protected]
npm ERR! node
modules/@apollographql/graphql-language-service-interface/nodemodules/@apollographql/graphql-language-service-parser npm ERR! @apollographql/[email protected]"^2.0.0" from @apollographql/[email protected] npm ERR! nodemodules/@apollographql/graphql-language-service-interface
npm ERR! @apollographql/[email protected]"^2.0.2" from [email protected]
npm ERR! nodemodules/apollo-language-server npm ERR! [email protected]"^1.25.0" from [email protected] npm ERR! nodemodules/apollo
npm ERR! 1 more (apollo-codegen-core)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/davem/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/davem/.npm/logs/2021-02-01T144522425Z-debug.log