How to add persist caching to config?

Hello!
I wanna prefetch ApolloQuery component
How?

Version

v4.0.0-rc.2

Reproduction link

https://github.com/bviala/nuxt-apollo-crash

Steps to reproduce

clone the repo
npm run dev (or build / start)
access localhost:3000
check your terminal to see that the server crashed

Check pages/index.vue to see the code causing the issue.
It looks like any error happening in custom code passed to the apollo object will make the server crash.

What is expected ?

Server not crashing 😬

What is actually happening?

Server crashing 😭

Additional comments?

I'm not sure if this is a nuxt/apollo or a nuxt issue 🤔

THIS IS A SECURY ISSUE!

Version

v4.0.0-rc.3

Reproduction link

https://github.com/dominictarr/event-stream/issues/116
https://www.npmjs.com/advisories/737

Steps to reproduce

Run yarn audit in a project that has @nuxtjs/apollo as a dependency.

What is expected ?

flatmap-stream > 0.1.1

What is actually happening?

flatmap-stream = 0.1.1

THIS IS A SECURY ISSUE!

https://github.com/dominictarr/event-stream/issues/116
https://www.npmjs.com/advisories/737

What problem does this feature solve?

The version of vue-apollo that @nuxtjs/apollo uses is riddled with bugs. The maintainer has squashed a lot of them (almost two weeks ago) and has since released a new version.

In particular there was a bug with SSR that screams and throws errors with plugins that modify the vue prototype i.e. vee-validate.

Ive been locked in nuxt 1.4 because of this package. And I really don't want to be. Can you please update this projects dependencies?

What does the proposed changes look like?

Upgrading vue-apollo to 3.0.0.beta-26

 modules: [
    '@nuxtjs/axios',
    '@nuxtjs/apollo'
  ],
  apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: "https://corp-dev.flyakeed.com:8001/graphql",
        httpLinkOptions: {
          "x-token": "",
          "x-auth-token": "hash",
          "x-refresh-token": "hash"
        }
      }
    }
  },

how to pass custom headers?
i have the code above.
then i got an error not authenticated.

Thanks

How to Set Custom Header

apollo: {
    headers: {
    },
    httpLinkOptions: {
          credentials: 'same-origin',

        },
        // You can use `wss` for secure connection (recommended in production)
        // Use `null` to disable subscriptions
        wsEndpoint: 'localhost:4000' 
      }
    }
  },

Thank you!

apollo: {
  "x-token": "hash",
  "x-auth-token": "hash",
  "x-refresh-token":  "hash",
  headers: {
  },
  clientConfigs: {
    default: {
      // required
      httpEndpoint: "localhost:4000"
    }
  }
}

I also tried this one

apollo: {
  clientConfigs: {
    default: {
      httpEndpoint: 'localhost:4000',
      httpLinkOptions: {
        headers: {
           'x-token': 'hash',
           'x-auth-token': 'hash',
           'x-refresh-token':  'hash'
        }
      }
    }
  }
}

Hi team.
I'm trying in vain to get our Nuxt app talking to the our Graph backend without any luck.

We always want the auth to be ready in pulling from our headless CMS.

The module has been configured with the following:

apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: 'https://cms.test/graphql',
        getAuth: () =>
          'Bearer 0kOjJBqSSKFsAJ-qmB6JGIJ7CIGLjCkYmnhP8l-j9KCV3DkJDuzaLakMnSd1Rhbb'
      }
    }
  },

but even with a simple

apollo: {
    hello: gql`
      {
        hello
      }
    `
  }

in the Vue component, we get GraphQL error: Not authorized

We can connect to GraphQL just fine using Insomnia app setting the Bearer token.

Tearing what's left of my hair out trying to do this piece.

Any insight appreciated.

I'm not 100% sure what the problem is but it seems that this module is sending off an initial HTTP GET to the socket endpoint that I config for my phoenix/absinthe server.

I've had to give this a try: https://github.com/e-lam/apollo-module-absinthe. but it'd feel a little nicer to use the officially supported library.

Is there something I can do to override some configs? Still a little new to vue/nuxt coming from React land.

Version

v4.0.0-rc.3

Reproduction link

https://github.com/jaec86/nuxt-apollo-test

Steps to reproduce

This a test to integrate nuxt, apollo module and shopify storefront API.

1. Before starting the nuxt project you should create a shopify development store.
2. Once you have the store you need to create some products and add them to a collection. I created an automated collection called "all-products" with a condition that every product price should be greater than 0.
3. Finally you need to create a token for the storefront, get the store URL and put them in the nuxt configuration file where says <YOUR_SHOPIFY_TOKEN> and <YOUR_SHOPIFY_STORE>.
4. Once you start nuxt project you should see the index page with the first 6 product titles. Navigate to about page and then go to index page again. If the error is not thrown repeat the navigation until it appears.

What is expected ?

I would expect to navigate normally between pages and fetching more products without a problem.

What is actually happening?

After navigating back to the index page or fetching more products I always get this error. If I include prefetch: true inside apollo query the error will not appear while navigating, but if I click the "load more" button the same error will show.

Additional comments?

I tested this query with vue-cli-plugin-apollo and it is working fine.

Version

v4.0.0-rc.3

Reproduction link

https://github.com/jaec86/nuxt-apollo-test

Steps to reproduce

This a test to integrate nuxt, apollo module and shopify storefront API.

1. Before starting the nuxt project you should create a shopify development store.
2. Once you have the store you need to create some products and add them to a collection. I created an automated collection called "all-products" with a condition that every product price should be greater than 0.
3. Finally you need to create a token for the storefront, get the store URL and put them in the nuxt configuration file where says <YOUR_SHOPIFY_TOKEN> and <YOUR_SHOPIFY_STORE>.
4. Once you start nuxt project you should see the index page with the first 6 product titles. Navigate to about page and then go to index page again. If the error is not thrown repeat the navigation until it appears.

What is expected ?

I would expect to navigate normally between pages and fetching more products without a problem.

What is actually happening?

After navigating back to the index page or fetching more products I always get this error. If I include prefetch: true inside apollo query the error will not appear while navigating, but if I click the "load more" button the same error will show.

Additional comments?

I tested this query with vue-cli-plugin-apollo and it is working fine.

I updated to rc2.3 (I know rc3 is the latest, but rc2.3 is on npm) which uses the newest version of vue-apollo (beta.25)

And in the new vue-apollo willPrefetch was removed.

I was wrapping one of my nuxt layouts in willPrefetch so I didn't have to write the same apollo query a bunch of times in the page components.

After refactoring my component and removing willPrefetch the console throws this error on page load:

Any idea what's going on here? Below is my query

apollo: {
    website: {
      query: WEBSITE_QUERY,
      prefetch: ({ route }) => ({
        username: route.params.username,
      }),
      variables() {
        return {
          username: this.$route.params.username,
        };
      },
      result({ data }) {
        this.$store.commit('website/setWebsite', data.website);
      },
    },
  },

Would it be possible to use an Apollo Tag like <ApolloQuery :query="require('./../../graphql/queries/adventures.gql')"> ?
It Should be rendered on the Server Side nuxt.js.

I'm trying to force GET method in my request to GraphQL API, I need it to allow Service Worker Cache API to save API request data. But I have error and I'm stuck:

Uncaught (in promise) Error: Network error: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body.

This is my nuxt.config.js apollo config:

apollo: {
    includeNodeModules: true, // optional, default: false (this includes graphql-tag for node_modules folder)
    authenticationType: "Basic", // optional, default: "Bearer"
    /* tslint:disable */
    errorHandler(error) {
        console.log("%cError", "background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;", error.message);
    },
    /* tslint:enable */
    clientConfigs: {
        default: {
            // required
            httpEndpoint: "http://myprivateapi",
            // optional
            // See https://www.apollographql.com/docs/link/links/http.html#options
            httpLinkOptions: {
                fetchOptions: { method: "GET" },
                /* tslint:disable */
                fetch: (uri, options) => {
                    const { body, ...newOptions } = options;
                    const queryString = objectToQuery(JSON.parse(body));
                    requestedString = uri + queryString;
                    return fetch(requestedString, newOptions);
                },
                /* tslint:enable */
            },
        },
    },

    networkInterfaces: {
        default: "~/apollo/network-interfaces/default.ts",
    },
},

Is there anything wrong?

Version

4.0.0-rc2.3

Reproduction link

https://github.com/ImreC/nuxt-ava-problem

Steps to reproduce

• npm run test --> Ava crashes with 'nuxt build error'
• remove store/index.js line 1 (the gql import) --> Ava works fine
• npm run dev always works and produces results as expected

What is expected ?

I am trying to run ava tests on a default app containing the apollo module. I am expecting ava testing using npm run test to work

What is actually happening?

Ava testing crashes with a 'nuxt build error'. Removing the gql import fixes everything.

Is it possible to suppress the _typename from the apollo query result as suggested in this issue?
https://github.com/apollographql/apollo-client/issues/1913

I'm creating listing with load more option. On server side I'm loading first 12 results of query and on client side I want to add values from "load more" to server side result.

On server side I haven't access to "this" so i don't now how assign to result of server side and client side to the same variable -1

Here is my query:

apollo: {
            searchProperties: {
                query: PROPERTY_LISTING_SEARCH,
                prefetch: (route) => {
                    return {
                        searchFilters: {
                            type: 'FLAT',
                            transaction: 'SALE',
                            dictionaries: []
                        },
                        numberOfResults: 12,
                        pageNumber: 1,
                        searchOrder: {
                            sortKey: "RANK",
                            sortOrder: "ASC"
                        },
                    }
                },
                variables () {
                    return {
                        searchFilters: this.searchFilters,
                        numberOfResults: this.pagination.elementsPerPage,
                        pageNumber: 1,
                        searchOrder: {
                            sortKey: this.sort.sortKey,
                            sortOrder: this.sort.sortOrder,
                        },
                    };
                },
                result(data) {
                    if(process.client) {
                        console.log(data.data.searchProperties)
                    }

                    this.loading = data.loading;
                    if (!this.viewLoaded) {
                        this.viewLoaded = true;
                    }
                }
            },
        },