I faced with uncertainty how to properly organize user authentication and authorization.

I'm using hasura as graphql engine. I make a request for user data, as a result an action is triggered, which, using a webhook, receives user data on express server, generates an access token based on them and refresh token, puts the refresh token in the httpl-only cookie and sends all this to the client. And on the client, the access token must be set in the apollo authorization header. I also intend to use this access token in the authorization middleware to protect some pages from guests. But:

1) If i using smart query in auth component, i haven't access to "this" in update or result hook and can't use $apolloHelpers. In addition middleware triggers before smartQuery update or result hooks and the user in such a case is not authenticated on the page render
2) I can use the nuxtServerInit for this purpose, but in this case, on the client, I don't have access to the user data from the ssr cache, since they are cleared. And I will either have to duplicate the request for user data to further manipulate it, or store and manipulate the user instance using vuex, which will be a double source of truth

I have an async function in the store that gets events from a third party using await this.$axios.get(). Any page that calls this function (via fetch and store.dispatch in page template) fails on reload. If you navigate there from another page, ti works great. But if you go directly to the page, it fails with the message "TypeError: Cannot read property 'defaultClient' of undefined". There is a 404 error, but instead of directing to our 404 page, I get nothing with this message. In fact, any wrong url (/asdf) fails this way instead of giving our 404 page. I actually don't understand why apollo is involved at all. Does anyone else? The live site is here: https://stapferhaus.ch/agenda. Thanks for any ideas of what to check.

Hi,

Is there a way to achieve something like this:

import { Auth } from 'aws-amplify'
import { baseUrl } from '@/config/api'

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

The reason: often times, you need to refresh the token. In this case, Auth.currentSession() will smartly use old token or refresh and return a new token. But seems like getAuth does not support async here.

Thanks.
Charlie

Looking at the documentation, it is said that you need to add graphql-tag to use external .gql files.

graphql-tag seems to be automatically installed along apollo, and the .gql files works.

Should the documentation be changed?

I am desperately trying to debug why apollo seems to be unable to do server-side graphql calls to our internal API. We have proxied Nuxt with NGINX on the same domain as our API. Somehow, Nuxt seems to be unable to perform server-side requests, instead does it client-side. I use the normal apollo: {} object inside my vue components.
Server-side requests DO work when using an external API (i.e. Rick-and-Morty Graphql).

Is there any debug tool that makes it easy to see the graphql server side requests and responses, similar to what I could do when analyzing client-side requests in the chrome network debug tool? I want to find out whether the server does requests at all, where they fail, the headers, responses, status codes etc.

There is some weird behaviour that looks very much like something malicious.

I added @nuxtjs/apollo to my repository, and when I try to load it, something inside is trying to stat all my private folders.

Thankfully it gets denied with EACCESS:

 ERROR  EACCES: permission denied, stat '/mnt/c/Documents and Settings'     12:20:10
 ERROR  EACCES: permission denied, stat '/mnt/c/Users/All Users'            12:20:10  
 ERROR  EACCES: permission denied, stat '/mnt/c/Users/<me>/Application Data'
 ERROR  EACCES: permission denied, stat '/mnt/c/Users/<me>/Documents/My Music'       
 ERROR  EACCES: permission denied, stat '/mnt/c/Users/Default User'         12:20:10  
 ERROR  EACCES: permission denied, stat '/mnt/c/Users/<me>/Cookies'        12:20:10
 ERROR  EACCES: permission denied, stat '/mnt/c/Users/<me>/Documents/My Pictures'    
 ERROR  EACCES: permission denied, stat '/mnt/c/Users/<me>/Local Settings' 12:20:11
 ERROR  EACCES: permission denied, stat '/mnt/c/Users/<me>/My Documents'   12:20:11  
 ERROR  EACCES: permission denied, stat '/mnt/c/Users/<me>/Documents/My Videos'      
 ERROR  EACCES: permission denied, stat '/mnt/c/Users/<me>/NetHood'        12:20:11  
 ERROR  EACCES: permission denied, stat '/mnt/c/Users/<me>/PrintHood'      12:20:11  
 ERROR  EACCES: permission denied, stat '/mnt/c/Users/<me>/Recent'         12:20:11  
 ERROR  EACCES: permission denied, stat '/mnt/c/Users/<me>/SendTo'         12:20:11  
 ERROR  EACCES: permission denied, stat '/mnt/c/Users/<me>/Start Menu'     12:20:11  
 ERROR  EACCES: permission denied, stat '/mnt/c/Users/<me>/Templates'     12:20:11  

I can't see any reason why it would need to do this, and I can't figure out what dependency or whatever is actually running the command.

Version

v4.0.1-rc.1

Reproduction link

https://github.com/it-sha/nuxt-apollo/commit/8ea71d7a8125ac54ee19aff3b799a7740ea7b4fb

Steps to reproduce

1. yarn add @nuxtjs/apollo graphql-tag
2. yarn dev

What is expected ?

start working with nuxt

What is actually happening?

× Client
Compiled with some errors in 11.74s

√ Server
Compiled successfully in 10.08s

ERROR Failed to compile with 44 errors friendly-errors 12:17:29

These dependencies were not found: friendly-errors 12:17:29
friendly-errors 12:17:29

• core-js/modules/es6.array.find in ./.nuxt/client.js friendly-errors 12:17:29
• core-js/modules/es6.array.from in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
• core-js/modules/es6.array.iterator in ./.nuxt/client.js friendly-errors 12:17:29
• core-js/modules/es6.date.to-string in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
• core-js/modules/es6.function.name in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
• core-js/modules/es6.object.assign in ./.nuxt/client.js friendly-errors 12:17:29
• core-js/modules/es6.object.keys in ./.nuxt/client.js, ./nodemodules/babel-loader/lib??ref--2-0!./nodemodule

s/vue-loader/lib??vue-loader-options!./pages/vuex-example.vue?vue&type=script&lang=js&

• core-js/modules/es6.object.to-string in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 2 other

s

• core-js/modules/es6.promise in ./.nuxt/client.js friendly-errors 12:17:29
• core-js/modules/es6.regexp.constructor in ./.nuxt/utils.js friendly-errors 12:17:29
• core-js/modules/es6.regexp.match in ./.nuxt/client.js friendly-errors 12:17:29
• core-js/modules/es6.regexp.replace in ./.nuxt/client.js, ./.nuxt/components/nuxt.js
• core-js/modules/es6.regexp.search in ./.nuxt/utils.js friendly-errors 12:17:29
• core-js/modules/es6.regexp.split in ./.nuxt/utils.js, ./nodemodules/babel-loader/lib??ref--2-0!./nodemodule

s/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-build-indicator.vue?vue&type=script&lang=js&

• core-js/modules/es6.regexp.to-string in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
• core-js/modules/es6.string.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
• core-js/modules/es6.string.iterator in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
• core-js/modules/es6.string.repeat in ./.nuxt/utils.js friendly-errors 12:17:29
• core-js/modules/es6.string.starts-with in ./.nuxt/utils.js friendly-errors 12:17:29
• core-js/modules/es6.symbol in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other
• core-js/modules/es7.array.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
• core-js/modules/es7.object.get-own-property-descriptors in ./.nuxt/index.js, ./node_modules/babel-loader/lib?

?ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/vuex-example.vue?vue&type=script&lang=js&

• core-js/modules/es7.promise.finally in ./.nuxt/client.js friendly-errors 12:17:29
• core-js/modules/es7.symbol.async-iterator in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
• core-js/modules/web.dom.iterable in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other
  friendly-errors 12:17:29
  To install them, you can run: npm install --save core-js/modules/es6.array.find core-js/modules/es6.array.from
  core-js/modules/es6.array.iterator core-js/modules/es6.date.to-string core-js/modules/es6.function.name core-js

/modules/es6.object.assign core-js/modules/es6.object.keys core-js/modules/es6.object.to-string core-js/modules

/es6.promise core-js/modules/es6.regexp.constructor core-js/modules/es6.regexp.match core-js/modules/es6.regexp

.replace core-js/modules/es6.regexp.search core-js/modules/es6.regexp.split core-js/modules/es6.regexp.to-strin

g core-js/modules/es6.string.includes core-js/modules/es6.string.iterator core-js/modules/es6.string.repeat cor

e-js/modules/es6.string.starts-with core-js/modules/es6.symbol core-js/modules/es7.array.includes core-js/modul

es/es7.object.get-own-property-descriptors core-js/modules/es7.promise.finally core-js/modules/es7.symbol.async

-iterator core-js/modules/web.dom.iterable
i Waiting for file changes 12:17:29
i Memory usage: 198 MB (RSS: 261 MB) 12:17:29
i Listening on: http://localhost:3000/ 12:17:29

WARN Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys' 12:17:30

Additional comments?

How can I install apollo into nuxt project?

I'm getting the following error despite the mutation being wrapped in the gql tag:

Invariant Violation: Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a "gql" tag? http://docs.apollostack.com/apollo-client/core.html#gql

This issue is only caused by the mutation code below, I have a query that works.

Code:

<script>
import gql from 'graphql-tag'

export default {
  apollo: {
    createTask: {
      mutation: gql`
        mutation Task(
          $taskName: String!
          $taskDesc: String!
        ) {
          setSession(
            taskName: $taskName
            taskDesc: $taskDesc
          ) {
            id
            taskName
          }
        }
      `,
      variables() {
        return {
          taskName: this.res.data.task_name,
          taskDesc: this.res.data.task_description,
        }
      },
    },
  },
  data() {
    return {
      createTask: '',
    }
  },
}
<script>

Hi!
I need to send a header which is determined by the presence of a certain cookie.

Example:
nuxt.config.js

httpLinkOptions: {
      headers: {
        'custom-header': {{ myCookie }},
      },
    },

Please tell me how to do this?

Is there any examples on how to use nuxt-property-decorator with nuxt-apollo together? Seems like nuxt-apollo doesn't support typescript.

I am using Laravel Sanctum to authenticate SPA users. Sanctum set an XSRF-TOKEN to users' cookies and requires that token to pass along with every request.
I can put to headers X-XSRF-TOKEN on client but don't know how to put it into process.server and nuxtServerInit to be specific.
Without setting X-XSRF-TOKEN to request headers, I always get 401 Unauthenticated error.
Hopefully someone could give me some ideas.

Hi all,

I'm working with nuxt + apollo + shopify graphQl

Shopify return SEO product details only using the Admin api which is not public and requires a secret token.
This should be fine since i need SEO details only on the server side.
To use both public and private shopify api's i've created two connectors one public and one private (no problem on doing this)

the admin connector looks like this one

ssr = true, ----> this means also for BE not exclusively for BE so the token is still public
httpLinkOptions: {
          // credentials: 'same-origin'
          headers: {
            "Content-Type": "application/json",
            "X-Shopify-Access-Token": process.env.SHOPIFY_ADMIN_API_TOKEN
          }
        },

as you can see i need a token and this will be set in the node ENV.
on localhost i use the module ["@nuxtjs/dotenv", { only: ["PUBLICDOTENV"] }], and with the flag only i can prevent that the secret token will be exposed to the app in the env prop

The problem is that apollo / nuxt, to being able to create the admin connector (fetchable also at runtime) are building the app hardcoding the secret token. this means that is not secure!
I'd like to find a way to being able to do query in the components like this (or via smart query)

let client = context.app.apolloProvider.adminClient;
client.doQuery...

but those query should run only on the server side and the code for that connector should not reach the front end code

I've found a solution now but is not good: I'm passing the data that comes from a secure endpoint in the generate phase. But i'm not able to run custom query on single components. I should pass everything in the generate payload prop which is impossible.

Any ideas?

Thanks a lot

routes: function() {
      const uri =
        "https://xxx.myshopify.com/admin/api/2020-04/graphql.json";
      const query = `query    {
        products(first:100)    {
            edges    {
                node    {
                    handle
                    seo {
                      title
                      description
                    }
                }
            }
        }
      }`;

      return fetch(uri, {
        method: "POST",
        headers: {
          "Content-Type": "application/graphql",
          "X-Shopify-Access-Token": "token"
        },
        body: query
      })
        .then(r => r.json())
        .then(response =>
          response.data.products.edges.map(product => {
            return {
              route: `/products/${product.node.handle}`,
              payload: { seo: product.node.seo }
            };
          })
        )
        .catch(e => console.log(e));

Version

v4.0.0-rc.19

Reproduction link

https://codesandbox.io/s/amazing-water-o1ix1

Steps to reproduce

1. yarn create nuxt-app my-app

create-nuxt-app v2.15.0
✨ Generating Nuxt.js project in my-app
? Project name my-app
? Project description My great Nuxt.js project
? Author name amalhao
? Choose programming language JavaScript
? Choose the package manager Yarn
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, to toggle all, to inv
ert selection)
? Choose linting tools (Press <space> to select, to toggle all, to inver
t selection)
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools (Press <space> to select, to toggle all, to i
nvert selection)