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!

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.

Please ignore, user mistake

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".

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) [comment, text, p, text, p, text, p, text, p, text, p, text] []

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

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.

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

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

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.

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
        })
  })
}

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.

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)

Wondering if this is a bug with vue-apollo?

edit: forgot to mention I am not using optimisticResponse

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"

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

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?

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"
}

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.

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