Version

v4.0.0-rc.19

Reproduction link

https://pyj86.sse.codesandbox.io

Steps to reproduce

If httpLinkOptions.credentials = true it seems the Cookie header is set when client side, but not when the SSR request is happening.

Setup nuxt.config.js like so:

    apollo: {
        authenticationType: "Basic",
        clientConfigs: {
            default: "~/plugins/apollo-config-default.js"
        }
    }

And then in apollo-config-default.js

export default function() {
    return {
        httpEndpoint: process.env.DEFAULT_ENDPOINT,
        getAuth: () => process.env.BASIC_API_TOKEN || "",
        httpLinkOptions: {
            credentials: "include"
        }
    }
}

Hard load to a public URL, like: https://pyj86.sse.codesandbox.io/

It works fine, browse to a private URL via a nuxt-link and it works fine.

Hard load into a private URL and it will give SSR node not matching server-rendered errors.

This page will only work if you are logged into backend. DM me for the logins which is here: https://stackhaus-backend.funkhaus.us /wp-admin

Public page: https://pyj86.sse.codesandbox.io/
Private page: https://pyj86.sse.codesandbox.io/featured/private-page

What is expected ?

Cookie header should be sent when both client side and SSR

What is actually happening?

SSR gives node not matching server-rendered errors

Additional comments?

I'm running WordPress as a headless CMS and trying to get preview/draft/private pages/posts working. The setup results in the backend having a different domain to your frontend, like example.com and api.example.com.

Hello,

I'm new with with apollo module. I have some difficulties to use apollo module.

I have to send a header Authorization: Bearer secret.

I try this :

apollo: {
authenticationType: 'Bearer',
clientConfigs: {
default: {
httpEndpoint: 'https://graphql.fauna.com/graphql',
getAuth: () => 'Bearer xxxxx'
}
}

but i have this error error message : GraphQL error: Missing authorization header.

How can I header the http header.

Best regards

What problem does this feature solve?

If i use a watcher loading in my apollo config, this watcher is called every time i made a query.
It's great if i want to work the same way every time, but if i've got one query where i want to manage the loading anothre way it doesn't work.

apollo: {
watchLoading: '~/plugins/apollo-watch-loading-handler.js',
clientConfigs: {
default: '~/apollo/client-configs/default.js'
},
includeNodeModules: true
},

query example :
dataSpecific: {
query: require('@/apollo/queries/dataSpecificQuery'),
variables () {
return {
ids: XXXX
}
},
update (data) {
return data
},
watchLoading (isLoading) {
console.log("i'm the only one who works')
}
}

If i use a watcher loading in my apollo config, this watcher is called every time i made a query.
It's great if i want to work the same way every time, but if i've got one query where i want to manage the loading anothre way it doesn't work.

apollo: {
watchLoading: '~/plugins/apollo-watch-loading-handler.js',
clientConfigs: {
default: '~/apollo/client-configs/default.js'
},
includeNodeModules: true
},

query example :

dataSpecific: {
query: require('@/apollo/queries/dataSpecificQuery'),
variables () {
return {
ids: XXXX
}
},
update (data) {
return data
},
watchLoading (isLoading) {
console.log("i'm the only one who works')
}
} 

Version

v4.0.0-rc.19

Reproduction link

https://codesandbox.io/s/romantic-volhard-oz2dd?fontsize=14&hidenavigation=1&theme=dark

Steps to reproduce

Run repro. See error.

What is expected ?

link to be loaded as apollo link

What is actually happening?

type error: x.concat is not a function

Additional comments?

After much consternation, I've tracked this down to this part of templates/plugin.js.

Essentially, if you provide a clientConfig as an object within nuxt.config.js, then it will be JSON.stringified. ApolloLink.prototype.toString() returns {}, so after stringification & parsing you get a plain empty object. Later when this is passed to ApolloLink.from, it will try to the link's concat method which doesn't exist because it's just a plain object.

In your nuxt.config.js if you define clientConfigs as a reference to another file like:

  clientConfigs: {
    default: '~/plugins/apollo/apollo.default.js'
  }

it will work as expected, because the config doesn't get stringified.

Query gql function with parameters in Vue-Apollo via
this.$apollo.addSmartQuery
in Nuxt apollo-module in components as in docs of Vue-Apollo, but in vuex this.app.apolloProvider.defaultClient (missing addSmartQuery function)

How to work in Nuxt Vuex with Apollo queries functions?

What problem does this feature solve?

By documentation we have
this.$apolloHelpers.onLogin(token /* if not default you can pass in client as second argument, you can set custom cookies attributes object as the third argument, and you can skip reset store as the fourth argument */)

We can set up ttl in days. But my App using ttl in seconds (2-5 hours for example)

Right now I extend my middleware like this one

export default function ({ app, error }) {
  const tokenExpireDateTime = app.$cookies.get(AUTH_TOKEN_EXPIRE)
  const tokenTtl = app.$moment(tokenExpireDateTime).diff(app.$moment(), 'seconds')
  const hasToken = !!app.$apolloHelpers.getToken()
  if (!hasToken || tokenTtl < 0) {
    error({ statusCode: 403, message: 'Permission denied', description: 'Sorry, you are forbidden from accessing this page.' })
  }

It solves a problem but anyway the best way use ttl in seconds

I have two queries X and Y. A variable of Y is taken from result of 'X'. I want to execute both queries on server side. How to achieve that?

Below simplified example is closest I can get, but query Y is executed at client side.

{
  apollo: {
    X: {
      query: X
    },
    Y: {
      query: Y,
      variables() {
        return { id: this.X.someField };
      },
      skip() {
        return !this.X;
      }
    },
  }
}

Basically I want:

1. Execute query X on server and get result.
2. Execute query Y on server with a variable from result of query X.

Many thanks,

Version

v4.0.0-rc.19

Reproduction link

https://jsfiddle.net/35twv906/

Steps to reproduce

Add cacheRedirects to inMemoryCache as seen in https://jsfiddle.net/35twv906/

See: https://www.apollographql.com/docs/react/performance/performance/

What is expected ?

Having Apollo Cache Redirects.

What is actually happening?

No cache redirect is happening.

Also .nuxt/apollo-module.js has below code. See cacheRedirects.Query is empty.

defaultClientConfig = {
  "httpEndpoint": "http://localhost:8080/v1/graphql",
  "inMemoryCacheOptions": {
    "cacheRedirects": {
      "Query": {}
    }
  }

In plugins/apollo-watch-loading-handler.js

export default (isLoading, countModifier, nuxtContext) => {
  loading += countModifier
  console.log('Global loading', loading, countModifier)
}

My nuxt.config:

// import colors from 'vuetify/es5/util/colors'

export default {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    titleTemplate: '%s - ' + process.env.npm_package_name,
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    { src : '~/plugins/vue-apexchart.js', ssr : false },
    { src : '~/plugins/v-charts.js', ssr : false },
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    '@nuxtjs/vuetify',
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth',
    '@nuxtjs/apollo'
  ],
  /*
  ** vuetify module configuration
  ** https://github.com/nuxt-community/vuetify-module
  */
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: true,
      themes: {
        // dark: {
        //   primary: colors.blue.darken2,
        //   accent: colors.grey.darken3,
        //   secondary: colors.amber.darken3,
        //   info: colors.teal.lighten1,
        //   warning: colors.amber.base,
        //   error: colors.deepOrange.accent4,
        //   success: colors.green.accent3
        // }
      }
    }
  },
  /*
  ** Build configuration
  */

  build: {
    // vendor : ['vue-apexchart'],
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
    }
  },
  serverMiddleware: ['./auth'],
  axios: {
    proxy: true
  },
  proxy: {
    '/api': 'http://localhost:3000'
  },
  auth: {
    redirect: {
      callback: '/callback'
    },
    strategies: {
      auth0: {
        domain: 'suenot.eu.auth0.com',
        client_id: 'NkwwJnyxYqp5uTifYg_LCqBiQ6SWWMyo'
      },
    }
  },
  apollo: {
    tokenName: 'apollo-token', // optional, default: apollo-token
    cookieAttributes: {
      /**
        * Define when the cookie will be removed. Value can be a Number
        * which will be interpreted as days from time of creation or a
        * Date instance. If omitted, the cookie becomes a session cookie.
        */
      expires: 7, // optional, default: 7 (days)

      /**
        * Define the path where the cookie is available. Defaults to '/'
        */
      path: '/', // optional
      /**
        * Define the domain where the cookie is available. Defaults to
        * the domain of the page where the cookie was created.
        */
      domain: 'http://localhost:3000/', // optional

      /**
        * A Boolean indicating if the cookie transmission requires a
        * secure protocol (https). Defaults to false.
        */
      secure: false,
    },
    includeNodeModules: true, // optional, default: false (this includes graphql-tag for node_modules folder)
    authenticationType: 'Basic', // 'Basic', // optional, default: 'Bearer'
    // (Optional) Default 'apollo' definition
    defaultOptions: {
      // See 'apollo' definition
      // For example: default query options
      $query: {
        loadingKey: 'loading',
        fetchPolicy: 'cache-and-network',
      },
    },
    // optional
    watchLoading: '~/plugins/apollo-watch-loading-handler.js',
    // optional
    errorHandler: '~/plugins/apollo-error-handler.js',
    // required
    clientConfigs: {
      default: {
        // required
        httpEndpoint: 'https://suenot-hasura.herokuapp.com/v1/graphql',
        // optional
        // override HTTP endpoint in browser only
        browserHttpEndpoint: '/graphql',
        // optional
        // See https://www.apollographql.com/docs/link/links/http.html#options
        httpLinkOptions: {
          credentials: 'same-origin'
        },
        // You can use `wss` for secure connection (recommended in production)
        // Use `null` to disable subscriptions
        // wsEndpoint: 'wss://suenot-hasura.herokuapp.com/v1/graphql', // optional
        // LocalStorage token
        // tokenName: 'auth._token.auth0', // optional
        // Enable Automatic Query persisting with Apollo Engine
        persisting: false, // Optional
        // Use websockets for everything (no HTTP)
        // You need to pass a `wsEndpoint` for this to work
        websocketsOnly: false // Optional
      },
      // test: {
      //   httpEndpoint: 'http://localhost:5000',
      //   wsEndpoint: 'ws://localhost:5000',
      //   tokenName: 'apollo-token'
      // },
      // alternative: user path to config which returns exact same config options
      // test2: '~/plugins/my-alternative-apollo-config.js'
    }
  }
}

Hi All,

So I am currently using Apollo to query an external graphql endpoint (Shopify storefront API)

Should I be using Apollo or Axios?
What are the differences?

Thanks

Hi All,

So I am implementing a login form.
I know that I need to have some sort of state management, i.e. storing a user access token etc.
What is the difference in using apollo link state to vuex?

Thanks

We've built a framework around Nuxt to get it to work with WordPress really well. We have been pulling our hair out trying to get post previewing working.

A common setup will be a WordPress install running on a domain like http://api.example.com and then to have Nuxt running on http://www.example.com. There is a WordPress plugin called WP-Graph-QL that creates a GraphQL endpoint like http://api.example.com/graphql, and we wrote a CORS plugin to set the correct CORS headers to work with whatever the frontend origin may be. This is that plugin if you are curious https://github.com/funkhaus/wp-graphql-cors

Our Nuxt Apollo setup is this:

export default function() {
    return {
        httpEndpoint: process.env.DEFAULT_ENDPOINT,
        getAuth: () => process.env.BASIC_API_TOKEN || "",
        httpLinkOptions: {
            credentials: "include"
        }
    }
}

FYI sometimes the API will be hidden behind a Basic Auth UN/PW (like when on a staging site for example), that is what the getAuth function is doing.

This all seems to work client side, but it fails on SSR for some reason. It seems the cookies don't get sent in the SSR request, but they do in the client side request. Am I missing something super obvious here?

I'm using nuxt apollo with Hasura.

apollo is being initialized on site first load with current token (passed as header to http and ws links (along with 'x-hasura-role'))
my problem is when the token is being refreshed!

how can i update those headers on WebSocketLink? (i know how to do that with httpLink)
i've tried middleware but they only work for httpLink, not with WebSocketLink - the headers does't change..

or is there a way to reset/reinitiate the apollo instance?

Thanks!

Even though I might be the only one not getting this: in case anyone else has problems authenticating, the httpLinkOptions allow you to add a header.

apollo: {
    clientConfigs: {
      default: {
        // required  
        httpEndpoint: 'https://graphql.fauna.com/graphql',
        httpLinkOptions: {
          headers: {
            Authorization: 'Bearer <yourToken>'
          }
        }
      }
    }
  },

Docs: https://www.apollographql.com/docs/link/links/http/#options

Hi all, I'm a complete beginner with GraphQL and Apollo and I wanted to get a simple quick and dirty test up and running with nuxt and FaunaDB.
Unfortunately, I'm stuck since 2 hours because I can't figure out how to add the authorization token to the nuxt-apollo module. No cookies, no localStorage, just a plain old string, hard coded.

NuxtJS Config:

// nuxt.config.js
apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: 'https://graphql.fauna.com/graphql',
      }
    }
  },

I've also added a plugin as from the docs it looks like I'm able to add a token there:

// /plugins/apollo/config.js
export default function (context) {
  return {
    httpEndpoint: 'https://google.com/graphql',
    getAuth: () => 'Bearer myFaunaDBToken'
  }
}

// nuxt.config.js
plugins: ['~/plugins/apollo/config.js'],

But that did not change the endpoint nor did it add a token.

Can anyone push me into the right direction? Thanks a lot in advance and thanks for your work on Open Source 👏👏

Version

v4.0.0-rc.19

Reproduction link

http://localhost:3000

Steps to reproduce

clone project. run npm run dev4 open dev tools -> network tab. Notice error index.js?cf67:111 POST http://localhost:3000/graphql 404 (Not Found)

What is expected ?

Network request should not be initiated. should not be called

What is actually happening?

Error 404: http://localhost:3000/graphql

Is there any way to reduce bundle size? I'm just using smart queries, no vue-apollo components.

This was also proposed and implemented in vue-apollo https://github.com/vuejs/vue-apollo/issues/660