nuxt-modules / apollo

Nuxt.js module to use Vue-Apollo. The Apollo integration for GraphQL.
https://apollo.nuxtjs.org
MIT License
955 stars 198 forks source link

async getAuth() #346

Open a-zog opened 4 years ago

a-zog commented 4 years ago

Hello,

Thank you for this amazing module. I'm looking for a way to easily use a valid token or refresh it easily before passing it. I tried this approach but it seems that it doesn't work

{
  return {
    ...
    getAuth: async () => {
      const token = await getToken(); // return valid token or refresh it
      return token ? `Bearer ${token}` : "";
    }
  }
}

Any way to achieve this?

Thanks a lot

stafyniaksacha commented 4 years ago

Hello @a-zog

Where did you register the getAuth method ? I think you have to move your clientOptions from nuxt.config.js to an external file (because options are stringified: functions are removed)

I have created a pull-request with a partial rewrite of the README.md to clarify some points You can access it here for now: https://github.com/stafyniaksacha/apollo-module/tree/feat/nuxt-2.14.0#apollo-clientoptions-using-file-configuration

cheers

a-zog commented 4 years ago

Yes @stafyniaksacha , that's what I did.

So I understand that Async would normally work with getAuth() but somehow it doesn't in my case?

stafyniaksacha commented 4 years ago

@a-zog hum, this setting does not seem to be async https://github.com/nuxt-community/apollo-module/blob/master/lib/templates/plugin.js#L60

can you copy your file in .nuxt/apollo-module.js ?

charlie0077 commented 4 years ago

I have exactly the same question. I think async support is a must have, due to token expiration.. You cannot assume the token is static. For example, AWS Amplify's token expires in like an hour. And they have a built-in way to refresh the token, but it does not work for apollo-module:

//this is the code inside my xx.js in plugin folder
export default function (_) {
  return {
    httpEndpoint: `${baseUrl}/graphql`,
    getAuth: async () => {
      await token = Auth.currentSession().   //this does not work, because getAuth does not do await
      return token
    },
  }
}

For comparison, axios supports this nicely:


  $axios.onRequest(async (config) => {
    const session = await Auth.currentSession()
    config.headers.authorization = session?.idToken?.jwtToken
    return config
  })

I actually don't understand how the auth in this lib works for the other people. Do they don't care about token refresh??

a-zog commented 4 years ago

@charlie0077 I'm using this approach for now: https://github.com/newsiberian/apollo-link-token-refresh

But I would prefer async getAuth() much cleaner method.

@Nuxt Community Team, would you please tell us if this feature is on any of your roadmaps or it's challenging to implement? Thank you

charlie0077 commented 4 years ago

@a-zog Thank you so much!!!!!

charlie0077 commented 4 years ago

@a-zog seems like "async support" is added recently in that vue-cli-plugin-apollo. apollo-module is using that plugin. We just need to bump up vue-cli-plugin-apollo to the latest version(it is 0.22.2 now). This PR: https://github.com/Akryum/vue-cli-plugin-apollo/pull/296/files

Here is my modification:

  1. in package.json: add: "vue-cli-plugin-apollo": "0.22.2", => this is to force vue-cli-plugin-apollo version to the latest.
  2. my new config:

export default function (_) { return { httpEndpoint: ${baseUrl}/graphql, getAuth: async () => { const session = await Auth.currentSession() return session?.idToken?.jwtToken }, } }

esmo commented 4 years ago

@charlie0077 adding vue-cli-plugin-apollo@0.22.2 doesn't work for me. When I yarn dev it says

regeneratorRuntime is not defined

This is what my package.json dependencies look like:

"dependencies": {
    "@nuxtjs/apollo": "^4.0.1-rc.3",
    "axios": "^0.19.2",
    "graphql-tag": "^2.11.0",
    "nuxt": "^2.14.3",
    "vue-cli-plugin-apollo": "0.22.2"
  }
charlie0077 commented 4 years ago

@esmo Hmm, interesting. RegeneratorRuntime may be related to es6 or babel. it is not related to logic. You may need to update your babel.rc. https://github.com/babel/babel/issues/8829

minyou9 commented 4 years ago

@a-zog seems like "async support" is added recently in that vue-cli-plugin-apollo. apollo-module is using that plugin. We just need to bump up vue-cli-plugin-apollo to the latest version(it is 0.22.2 now). This PR: https://github.com/Akryum/vue-cli-plugin-apollo/pull/296/files

Here is my modification:

  1. in package.json: add: "vue-cli-plugin-apollo": "0.22.2", => this is to force vue-cli-plugin-apollo version to the latest.
  2. my new config:

export default function (_) {
  return {
    httpEndpoint: `${baseUrl}/graphql`,
    getAuth: async () => {
      const session = await Auth.currentSession()
      return session?.idToken?.jwtToken
    },
  }
}

This actually works. Thanks very much

By the way, do we need to keep using this "vue-cli-plugin-apollo": "0.22.2 along the project forever?

charlie0077 commented 4 years ago

@minyou9 No, we don't need to keep it in package.json. Once this PR is merged, you don't need to "force" the version: https://github.com/nuxt-community/apollo-module/pull/331/files

phoenix377 commented 4 years ago

@esmo I also have same error - regeneratorRuntime is not defined. Could you please let me know if you found solution for that?

esmo commented 4 years ago

@phoenix377 I did not solve it. I was just playing around with nuxt to see if I could solve a problem with it. I am not using it anymore.