Activities

thebspin

thebspin posted a new question

apollo-module •

Nuxt-apollo example using AWS Appsync

I would like to see an example using the nuxt-apollo module with AWS Appsync. I can find examples how to set up the AUTH using vue but trying those methods with this module is not giving me any succes.

edit:

Sorry i thought my other question didn't came through.. but now i see it did and this is double posted can be deleted.

thebspin

thebspin posted a new question

apollo-module •

Use nuxt-apollo with AWS Appsync

I'm not being succesfull setting up my nuxt with nuxt-apollo and then getting data from my AWS Appsync grahpql server. Can you give an example how to set this up? There is probably a need for the aws-appsync package, but the examples i can find on the internet using vue and vue-apollo don't seem to work for me. That is new appsyncClient and then use that as a client for nuxt-apollo.

Much thanks!

rchl

rchl posted a new bug report

apollo-module •

bug Using unmaintained isomorphic-fetch (causing warnings)

Version

v4.0.0-rc.11

Reproduction link

http://dont.have.any

Steps to reproduce

Start a nuxt project (npm run dev) with @nuxtjs/apollo module enabled.

What is expected ?

No warning about node-fetch.

What is actually happening?

Getting a warning:

WARN  node-[email protected]^2.6.0 is recommended but node-[email protected]1.7.3 is installed!

Additional comments?

This won't necessarily be easily reproducible, depending on how npm hoists packages. If it will hoist 2.x then there will be no warning. If it will hoist 1.x then there will be warning.

Despite that, it's a clear bug when it happens as then the app will be using very old version of node-fetch that could lead to issues.

node-fetch is brought by the isomorphic-fetch package (https://github.com/matthew-andrews/isomorphic-fetch) which is now unmaintained for over 3 years so realistically it won't be updated any time soon.

In one of the issues in isomorphic-fetch someone pointed out replacement called cross-fetch (https://github.com/lquixada/cross-fetch). This one is maintained and looks like direct replacement.

walame

walame posted a new question

apollo-module •

How to access token in official example

Please ignore, user mistake

Jones-S

Jones-S posted a new question

apollo-module •

How to combine multiple apollo queries?

Hi there

I have a working GraphQL query (tested in GraphiQL):

{
  entries(section: [pages], slug: "my-page-slug") {
    slug
    title
  }
  seomatic(uri: "/") {
    metaTitleContainer
    metaTagContainer
    metaLinkContainer
    metaScriptContainer
    metaJsonLdContainer
  }
}

I want to fetch this data as well with apollo in nuxt:

So I tried:

<script>
import page from '~/apollo/queries/page'
import seomatic from '~/apollo/queries/seomatic'

export default {
  apollo: {
    entries: {
      query: page,
      prefetch: ({ route }) => ({ slug: route.params.slug }),
      variables() {
        return { slug: this.$route.params.slug }
      }
    },
    seomatic: {
      query: seomatic,
      prefetch: true
    }
  },
…

If I do that I will get an error message:

GraphQL error: Cannot query field "seomatic" on type "Query".

I then found this issue
https://github.com/apollographql/apollo-tooling/issues/648
and I would like to know if ths could be a problem of the apollo nuxt module.
Because following that fix indicated in the issue does not resolve anything.

I further tried to combine the two calls into one:

fragment SeoMaticFragment on Root {
  seomatic(uri: "/") {
    metaTitleContainer
    metaTagContainer
    metaLinkContainer
    metaScriptContainer
    metaJsonLdContainer
  }
}

query myQuery($slug: String!) {
  entries(section: [pages], slug: $slug) {
    slug
    title
  }

  SeoMaticFragment
}

~/apollo/queries/page.gql

But this would first throw an error

fragment Unknown type "Root"

  1. So what is the best way to combine?
  2. Why are the requests failing
  3. is there an option to activate batching
    like described here:
    https://blog.apollographql.com/query-batching-in-apollo-63acfd859862
const client = new ApolloClient({
 // ... other options ...
 shouldBatch: true,
});

thank you so much in advance.
Cheers

----- Edit------
I also tried it without all these fragments just to reduce complexity:

<script>
import gql from 'graphql-tag'


const query = gql`
  {
    entries(section: [pages], slug: "konrad-schlufti-zieht-rein") {
      slug
      title
    }
  }
`
const query2 = gql`
  {
    seomatic(uri: "/") {
      metaTitleContainer
      metaTagContainer
      metaLinkContainer
      metaScriptContainer
      metaJsonLdContainer
    }
  }
`

export default {
  apollo: {
    entries: {
      query,
      prefetch: ({ route }) => ({ slug: route.params.slug }),
      variables() {
        return { slug: this.$route.params.slug }
      }
    },
    seomatic: {
      query: query2,
      prefetch: true
    }
  },

Or in one command:

<script>
import gql from 'graphql-tag'

const query = gql`
  {
    entries(section: [pages], slug: "konrad-schlufti-zieht-rein") {
      slug
      title
    }
    seomatic(uri: "/") {
      metaTitleContainer
      metaTagContainer
      metaLinkContainer
      metaScriptContainer
      metaJsonLdContainer
    }
  }
`

export default {
  apollo: {
    entries: {
      query,
      prefetch: ({ route }) => ({ slug: route.params.slug }),
      variables() {
        return { slug: this.$route.params.slug }
      }
    }
  },

But both again would throw this error:

GraphQL error: Cannot query field "seomatic" on type "Query".

veitbjarsch

veitbjarsch posted a new question

apollo-module •

Mismatching childNodes vs. VNodes with apollo smart querys

I've tried and searched for a long time, but I always receive a mismatching error, if I use the apollo smart query inside a nuxt page. My component looks like this:

<template>
  <v-wrapper v-if="post">
    <v-title>{{ post.title }}</v-title>
    <v-content v-html="post.content"></v-content>
  </v-wrapper>
</template>

<script>
import vTitle from '~/components/html/section/title'
import vContent from '~/components/html/section/content'
import vWrapper from '~/components/html/wrapper'
import PostQuery from '~/apollo/queries/post/show'

export default {
  components: {
    vTitle,
    vContent,
    vWrapper,
  },
  apollo: {
    post: {
      query: PostQuery,
      variables () {
        return {
          type: 'page',
          slug: this.$route.params.page
        }
      },
    }
  },
  data () {
    return {
      post: null
    }
  }
}
</script>

It is rendered correctly, but it will generate following warning:

Mismatching childNodes vs. VNodes:  NodeList(12)&nbsp;[comment, text, p, text, p, text, p, text, p, text, p, text] []

The GQL Query will return html code. May someone can help me?

rlgod

rlgod posted a new feature request

apollo-module •

idea Option to skip resetStore when setting token with onLogin

What problem does this feature solve?

For short-lived tokens, this causes any in-flight requests to be cancelled due to the resetStore() call in the onLogin function.

What does the proposed changes look like?

Add an additional argument to skip store reset when calling onLogin and onLogout.

wan2land

wan2land posted a new question

apollo-module •

when onLogin after onLogout, cannot get tokens.

In my service, After logging out, i cannot login.

The situation is as follows:

await this.$apolloHelpers.onLogin(token)
console.log(11, this.$apolloHelpers.getToken()) // print token

await this.$apolloHelpers.onLogout()
console.log(22, this.$apolloHelpers.getToken()) // print undefined

await this.$apolloHelpers.onLogin(token)
console.log(33, this.$apolloHelpers.getToken()) // expect token, but print undefined
zachheine

zachheine posted a new question

apollo-module •

$apollo.loading during mutation

Is the $apollo.loading variable supposed to function during a mutation?

lambda0xff

lambda0xff posted a new bug report

apollo-module •

bug Module doesn't load

Version

v4.0.0-rc.8.2

Reproduction link

https://codesandbox.io/s/codesandbox-nuxt-08rtv

Steps to reproduce

yarn add @nuxtjs/apollo
yarn add [email protected] [email protected]

add to modules section of nuxt.config.js
modules: [
…,
'nuxtjs/apollo'

]

yarn dev // to launch nuxt app

What is expected ?

workin application

What is actually happening?

build crash:
FATAL Cannot convert undefined or null to object

at Function.keys (<anonymous>)
at ModuleContainer.module.exports (nodemodules/@nuxtjs/apollo/lib/module.js:12:35) at ModuleContainer.addModule (nodemodules/@nuxt/core/dist/core.js:189:34)
at promise.then (node_modules/@nuxt/utils/dist/utils.js:1796:43)

╭────────────────────────────────────────────────────╮
│ │
│ ✖ Nuxt Fatal Error │
│ │
│ TypeError: Cannot convert undefined or null to │
│ object │
│ │
╰────────────────────────────────────────────────────╯

error Command failed with exit code 1.

IngvarListard

IngvarListard posted a new question

apollo-module •

Apollo Client doesn't send cookies from server side

I recently started new project with nuxt and apollo, and mentioned that cookies doesn't send when a request was made from server side. Context shows that headers comes with request with all necessary data, but after querying from server side to backend it not includes. I'm not sure where problem is: neither my side, nor nuxt-apollo, nor vue-apollo, etc.

Can anybody give me an advice?

Config

import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { ApolloLink, concat } from 'apollo-link'
import { BatchHttpLink } from 'apollo-link-batch-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { errorLink } from './error-handler'

export default ctx => {
  const production = process.env.NODE_ENV === 'production'
  const opts = {
    credentials: 'include',
    uri: production ? '/api_v1' : 'http://localhost:8000/api_v1'
  }

  if (production) {
    opts.batchInterval = 50
  }

  const httpLink = production ? new BatchHttpLink(opts) : new HttpLink(opts)

  const csrfMiddleware = new ApolloLink((operation, forward) => {
    operation.setContext({
      headers: {
        'X-CSRFToken': ctx.app.$cookies.get('csrftoken') || null
      }
    })
    return forward(operation)
  })

  const cache = new InMemoryCache()

  if (process.client) {
    if (typeof window !== 'undefined') {
      const state = window.__APOLLO_STATE__
      if (state) {
        cache.restore(state.defaultClient)
      }
    }
  }

  const link = errorLink(ctx).concat(concat(csrfMiddleware, httpLink))

  return new ApolloClient({
    link,
    cache,
    credentials: 'include',
    ...(process.server
      ? {
          ssrMode: true
        }
      : {
          ssrForceFetchDelay: 100
        })
  })
}
sebmor

sebmor posted a new question

apollo-module •

nuxtState not set when nuxt is running in 'spa' mode

Having in default.js

export default function (ctx) {
  console.log('ctx.nuxtState returns undefined', ctx)
  ...
  const uri = '/api/graphql'
  const httpLink = createHttpLink({ uri })

  const link = ApolloLink.from([
    httpLink
  ])
}

And nuxt.config.js

apollo: {
  clientConfigs: {
    default: '~/apollo/client-configs/default.js'
  }
},
mode: 'spa'

ctx.nuxtState never gets set during page load. And thus apollo never runs. Once you turn off spa-mode nuxtState gets set correctly and everything runs smoothly.

michaelyiu

michaelyiu posted a new question

apollo-module •

Refreshing browser causes any page with a Smart Query to re-render twice, as well as update() and result().

As per title, the behaviour seems to be fine without refreshing and on pages that DO NOT have a Smart Query, the rendering only happens once.

WITH a Smart Query however, refreshing renders the page twice and looking at the console while refreshing, the image essentially is quickly shown twice. (re-render)
smartqueryissue.jpg

Wondering if this is a bug with vue-apollo?

edit: forgot to mention I am not using optimisticResponse

mmintel

mmintel posted a new question

apollo-module •

Error when using async config with InMemoryCache

Hi there!

I am creating a schema.json before creating my cache, so I created a file that exports an async function like this:

export default (async () => {
  await schemaQuery()
  const schema = loadSchema()

  const fragmentMatcher = new IntrospectionFragmentMatcher({
    introspectionQueryResultData: schema
  })

  return {
    httpEndpoint: 'https://graphql.datocms.com',
    getAuth: () => `Bearer ${process.env.DATO_CMS}`,
    cache: new InMemoryCache({ fragmentMatcher })
  }
})()

then I require the apollo module like this (want to embed this into my own module):

const apolloConfig = await require('./config/apollo.js').default

this.requireModule(['@nuxtjs/apollo', {
    clientConfigs: {
      default: apolloConfig
    }
  }])

however I am getting an cache.transformDocument is not a function when browsing my site.

A console.log(apolloConfig) shows:

{
  httpEndpoint: 'https://graphql.datocms.com',
  getAuth: [Function: getAuth],
  cache: InMemoryCache {
    watches: Set {},
    typenameDocumentCache: Map {},
    cacheKeyRoot: KeyTrie { weakness: true },
    silenceBroadcast: false,
    config: {
      fragmentMatcher: [IntrospectionFragmentMatcher],
      dataIdFromObject: [Function: defaultDataIdFromObject],
      addTypename: true,
      resultCaching: true,
      freezeResults: false
    },
    addTypename: true,
    data: DepTrackingCache {
      data: [Object: null prototype] {},
      depend: [Function]
    },
    optimisticData: DepTrackingCache {
      data: [Object: null prototype] {},
      depend: [Function]
    },
    storeWriter: StoreWriter {},
    storeReader: StoreReader {
      freezeResults: false,
      executeStoreQuery: [Function],
      executeSelectionSet: [Function],
      executeSubSelectedArray: [Function]
    },
    maybeBroadcastWatch: [Function: optimistic] { dirty: [Function] }
  }
}

Do you have any idea? That code worked when I created the schema.json manually and had my config in the nuxt.config.js (and not in my module). Maybe I can't require the config like this?

I am on "@nuxtjs/apollo": "^4.0.0-rc7", and "nuxt": "^2.8.1"

ducong123

ducong123 posted a new question

apollo-module •

nuxt apollo websocket 订阅偶尔会关闭

在为客户端构建具有Apollo Server graphql和nuxt apollo-module的VueJS应用程序后,偶尔会在第一次加载时断开连接。(这不会每次都发生,也许每5-10次加载一次)。你知道这个的原因吗?

starikovm

starikovm posted a new question

apollo-module •

Multipart-form data

Hey guys!
I am enjoying nuxt for about a year already, it is awesome, and thanks to all community for really useful modules and documentation.
Recently I started rewriting API of my application to GraphQL. One of the queries is uploading a file with further uploading to Google Cloud Storage and returning a new file name and path.
So far I investigated the web and found couple of examples for apollo backend for that, and even some example for frontend, which changes request to multipart-form data (https://medium.com/@danielbuechele/file-uploads-with-graphql-and-apollo-5502bbf3941e), which is required for posting a file to server.

Is there any way of using nuxt/apollo-module and changing headers to multipart-form and body to formData?

morigs

morigs posted a new question

apollo-module •

Way to specify endpoints on startup

I'm looking for a way to set http and ws endroins during application launch, for example, using environment variables. However, after nuxt build in apollo-module.js, I see that my paths were interpolated during build:

defaultClientConfig = {
  "httpEndpoint": "http://...:4000",
  "wsEndpoint": "ws://...:4000/graphql"
}
michaelyiu

michaelyiu posted a new question

apollo-module •

Issues with custom headers

Hi, I've been stuck on this for a while, but I'm having issues sending a refresh token header to my server. I have a query sending me tokens and I've set them to local storage. I then try to pass this as a header in the apollo client set up but my server isn't receiving it and I believe it's because of SSR and I am unsure of how to get the refresh token from anywhere else other than the place I set it.

I've looked in the context.req object since I've seen other people access the req.headers object to get stuff, but I don't seem to have the same luck as it's never there. I've also seen some use of VueX, however I'm trying to avoid using it as I'm wanting to use Apollo for state management for a single source of truth.

Attached is my apollo-client config.. whenever I run a request, as a header I get 'x-refresh-token': 'cheese' and never the actual token in local storage.

apollo-client setup.jpg

michaelyiu

michaelyiu resolved the question #c210

apollo-module •

apolloHelpers not working as intended

Turns out having the httpOnly option as true in the backend when setting the cookie causes issues as the helper cannot read the cookie..

ducong123

ducong123 posted a new question

apollo-module •

nuxt wsEndpoint 怎么在模块配置

nuxt 中怎么使用wsEndpoint ,在发生订阅数据的页面调用该地址,其他页面不显示呢?