Activities

frt93

frt93 posted a new question

apollo-module •

how to transfer or restore apollo ssr cache on client

I checked this issues:
https://github.com/nuxt-community/apollo-module/issues/286
https://github.com/nuxt-community/apollo-module/pull/290

but i can't restore cache from nuxtServerInit's request on the client

frt93

frt93 posted a new question

apollo-module •

User authentication cases

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

janeschindler

janeschindler posted a new question

apollo-module •

defaultClient undefined in nuxt store

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.

charlie0077

charlie0077 posted a new question

apollo-module •

async getAuth

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

Saurou

Saurou posted a new question

apollo-module •

graphql-tag installation not necessary?

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?

natemate90

natemate90 posted a new question

apollo-module •

How to debug apollo SERVER side network requests and responses similar to the chrome network tab debugging tool

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.

MarcelloTheArcane

MarcelloTheArcane posted a new question

apollo-module •

Why does @nuxtjs/apollo stat all my local folders?

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.

it-sha

it-sha posted a new bug report

apollo-module •

bug Can't install @nuxt/apollo with Nuxt 2.13.1

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?

Syntle

Syntle posted a new question

apollo-module •

Perhaps you need to wrap the query string in a "gql" tag? When it is already wrapped in the "gql" tag

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

Sendoo posted a new question

apollo-module •

How to set global custom dynamic header?

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?

webcoderkz

webcoderkz posted a new question

apollo-module •

Is there a way to use this plugin with nuxt-property-decorator?

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

quangvision

quangvision posted a new question

apollo-module •

How to add to req headers XSRF-TOKEN on NuxtServerInit?

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.

bitforcesrl

bitforcesrl posted a new question

apollo-module •

How to keep auth keys secret ?

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));
amalhao

amalhao posted a new bug report

apollo-module •

bug Nuxt app compilation error after adding @nuxt/apollo module

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)

  1. yarn add @nuxtjs/apollo

  2. yarn build

What is expected ?

To not have build errors

What is actually happening?

│ ✖ Nuxt Fatal Error │
│ │
│ Error: Nuxt build error

Diizzayy

Diizzayy posted a new question

apollo-module •

How to reinitiate apollo client and add auth header to subsequent requests after login

My backend generates a httpOnly session cookie that will then be used for authorization by clients to the graphql backend.

The problem that I've ran into is that the page needs to be fully reloaded after the auth state changes (login / logout), The authorization header is only added to the requests after reloading the page (Apollo basically needs to be reinitialized)

Problems:

  • On Login => httpOnly Cookie is set => Apollo is unable to reinitialize and apply auth header
  • On Logout => httpOnly Cookie is cleared => Apollo still applies said revoked token to subsequent requests

Questions:

  • Is there a way to manually reinitialize an apollo client?

My Setup:
Within nuxtServerInit the session cookie is retrieved from the request object and saved in vuex for use in apollo.config.js on the client side

Within the apollo.config.js the session cookie is retrieved from either the request object ( for server side ) or vuex ( for client side ) and added to the apollo headers via httpLinkOptions

apollo.config.js

export default function ({ app, req, env }) {
  const token = () => {
    if (process.server && req.cookies) {
      return req.cookies['__session']
    } else if (!process.server && app.store.getters['user/getToken']) {
      return app.store.getters['user/getToken']
    }
  }

  return {
    httpEndpoint: isDev ? env.urlDev : env.urlProd,

    httpLinkOptions: {
      ...(token() && {
        headers: {
          authorization: `Bearer ${token()}`,
        },
      }),
    },
  }
}
jasonday

jasonday posted a new question

apollo-module •

Nuxt link failing with graphQL (apollo)

There appears to be an issue with my graphQL query, as the template renders but the nuxt-link fails. It just shows the catrule.ruleid text, but is not in a link format.

Template:

<li v-for="catrule in cat_rulesetCollection">
    <nuxt-link :to="`/cat-rule/` + catrule.ruleid">{{ catrule.ruleid }}</nuxt-link>
</li>

Apollo:

import gql from 'graphql-tag'
export default {
    apollo: {
        cat_rulesetCollection: gql` {
            cat_rulesetCollection(populate:1) {
                ruleid
                }
            }`
        }
    }

Error:

Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
    at VueComponent.observe (nuxt-link.client.js?4e55:62)
pfritsch

pfritsch posted a new bug report

apollo-module •

bug Nuxt fails to start when adding the package

Version

v4.0.0-rc.19

Reproduction link

https://codesandbox.io/s/sweet-blackwell-y4nuz?file=/package.json

Steps to reproduce

yarn add @nuxtjs/apollo
yarn dev

What is expected ?

Nuxt (Nuxt.js v2.12.2) should start as usual

What is actually happening?

Terminal returns :

 ERROR  Failed to compile with 42 errors

These dependencies were not found:

* core-js/modules/es6.array.find in ./.nuxt/client.js, ./node_module [...]

To install them, you can run: npm install --save core-js/modules/es6.array.find  [...]
koresar

koresar posted a new question

apollo-module •

How to reuse cache between server side page renders?

We have many pages which are very similar, they are based on the same data. When Nuxt renders each page it creates a new instance of ApolloClient (and InMemoryCache).

Looks like there is no way to reuse cache between two different server side renders. We tried everything out there we could find on the internet.

How to reuse cache between requests on the server?

Tinoooo

Tinoooo posted a new feature request

apollo-module •

idea Allow omitting the token in the parameters of $apolloHelpers.onLogin

What problem does this feature solve?

In case the authentication is done via a HttpOnly cookie, there is no need to store the token in a seperate cookie. A current workaround is, to just pass a dummy token.

What does the proposed changes look like?

It should be possible to call $apolloHelpers.onLogin without the first parameter (the token).

drewbaker

drewbaker posted a new feature request

apollo-module •

idea Support for Nuxt new fetch()?

What problem does this feature solve?

It would be great if this could use the new Nuxt fetch() API so that smart queries would be SSR'd at all component levels (not just on Pages like it does currently).

What does the proposed changes look like?

I imagine that you'd want to make this use the new fetch() be default as it doesn't have any breaking changes. Perhaps you'd have a config option to use the old way for people upgrading Nuxt-Apollo for other needs.