Apollo-module · Nuxt Community

Activities

Lahori-Jawan posted a new question

apollo-module •

Subscriptions result is null

This module is working smoothly on a couple of projects (one production, one simple dev) as far as the Mutations and Queries are concerned but now I want to implement Real-time results using Subscriptions and have followed official docs, Medium post. Every thing works fine without breaking anything but without result too. Below is my minimal implementation: @dohomi am I missing something?

Thanks.

apollo-config.js (plugin)

import { InMemoryCache } from 'apollo-cache-inmemory'

const cache = new InMemoryCache()

export default function (ctx) {
  let httpEndpoint = 'http://localhost:3000/graphql'

  return {
    httpEndpoint,
    wsEndpoint: 'ws://localhost:3000/graphql',
    cache
  }
}

schema.js

const { gql } = require('apollo-server-express');

const typeDefs = gql`
  type Query {
    hello: String
  }

  type Mutation {
    newComment(content: String!): Comment,
  }

  type Subscription {
    commentAdded: Comment
  }

  type Comment {
    id: Int,
    content: String,
  }
`;

module.exports = typeDefs

resolver.js

const { Comment} = require('../../models');
const { PubSub } = require('graphql-subscriptions');

const COMMENT_ADDED = 'commentAdded';

const pubsub = new PubSub();

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
  Mutation: {
    async newComment(root, args) {
      const comment = await Comment.create(args)
      await pubsub.publish(COMMENT_ADDED, { 'newComment': comment });
      return comment
        }
  },
  Subscription: {
    commentAdded: {
      subscribe: () => pubsub.asyncIterator('commentAdded')
    }
  },
};

module.exports = resolvers

commentAdded.gql

subscription commentAdded {
  commentAdded {
    id
    content
  }
}

ApolloServer.js

const { ApolloServer } = require('apollo-server-express');
const typeDefs = require('./schema');
const resolvers = require('./resolver');
const apollo = new ApolloServer({
  typeDefs,
  resolvers,
});

module.exports = apollo

index.vue

<template>
  <section class="container">
    {{ hello }}
  </section>
</template>

<script>
import hello from '@/graphql/Queries/hello.gql';
import COMMENT_ADDED from '@/graphql/Subscriptions/newComment.gql'
export default {
  apollo: {
    hello: {
      prefetch: true,
      query () {
        return hello
      }
    },
    $subscribe: {
      commentAdded: {
        query: COMMENT_ADDED,
        result (data) {
          console.log('comment listening', data)
        }
      }
    }
  },
}
</script>

main.js

const { createServer } = require('http');
const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')

const apollo = require('../graphql/Apollo/server.js')

const app = express()

const httpServer = createServer(app);

apollo.applyMiddleware({ app });
apollo.installSubscriptionHandlers(httpServer);

// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')

async function start() {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)

  const {
    host = process.env.HOST || 'localhost',
    port = process.env.PORT || 3000
  } = nuxt.options.server

  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  }

  // Give nuxt middleware to express
  app.use(nuxt.render)

  // Listen the server
  httpServer.listen(port, host)
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  })
}
start()

Result

yaki4 posted a new bug report

apollo-module •

Apollo client hydration

Version

v4.0.0-rc.4

Reproduction link

https://graphnewreader-uqpacjfhny.now.sh

Steps to reproduce

Click one of the link for second page.
Click the second button.
New query load.

link to git: https://gitlab.com/yaki4/grapheader.git

What is expected ?

New query use new store value in headers.

What is actually happening?

New query doesn't use new store value in headers.

Additional comments?

I already fill a bug report for this one. But the update doesn't resolve this issue.

yaki4 posted a new bug report

apollo-module •

Page infinite loading if contains apollo query

Version

v4.0.0-rc.4

Reproduction link

https://graphnewreader-uqpacjfhny.now.sh

Steps to reproduce

Click one of the link.
The page load with data.
Reload the page.

link for git: https://gitlab.com/yaki4/grapheader.git

What is expected ?

Page load and display data.

What is actually happening?

The second and third page with apollo query load forever.

Additional comments?

You can fin in package.json the requirement for vue, vue-template-compiler and vue-server-renderer.
I try remove and rebuilt yarn.lock without success

nelhop posted a new question

apollo-module •

Query with asyncData

Hey there,

how can I query data asynchronously?
(I am using v4.0.0-rc.4)

This query is working fine:

import news from '@/apollo/queries/news'

export default {
  apollo: {
      newsList: {
        query: news,
        prefetch: true,
        variables: { limit: 4 },
      }
   }
}

But when the page is not loaded directly but called with a <nuxt-link>, the data is not ready which results in a undefined object.

So I tried to use asyncData:

import news from '@/apollo/queries/news'

export default {
  asyncData(context) {
    return context.app.apolloProvider.defaultClient.query({
      query: news,
      prefetch: true,
      variables: { limit: 4 },
    }).then((newsList) => {
      return {newsList: newsList.data.newsList}
    })
  }
}

Which also works fine when the page is loaded directly, but throws the error: GraphQL error: Syntax Error GraphQL (1:1) Unexpected <EOF> 1: ^ when called with a <nuxt-link>.
I assume it can't find the qgl file, but how can I preload it? Or is there a other / better way to achieve this?

Tanks in advance! :)

tatane616 posted a new question

apollo-module •

How switch clientConfigs

https://github.com/nuxt-community/apollo-module/blob/master/test/fixture-multi-endpoints/nuxt.config.js

clientConfigs: {
      default: {
        httpEndpoint: process.env.HTTP_ENDPOINT,
        wsEndpoint: process.env.WS_ENDPOINT,
        getAuth: () => 'Bearer 1234'
      },
      second: {
        httpEndpoint: process.env.HTTP_ENDPOINT,
        wsEndpoint: null
      }
    }

How can I switch client between default and second ?

dohomi posted a new question

apollo-module •

client-server hydration error on current master branch

@kieusonlam @kevinmarrec could you guys try the current master branch? I merged the potential update but now the SSR client/server hydration breaks.
There must be some missing pieces. If you check out this repo and run dev,dev2,dev3 and open the console you will find the hydration error.
@Akryum could you maybe have a look what is missing with the most recent Vue 2.6.6 and vue-apollo as dependencies? Thanks!

iskanderbroere posted a new question

apollo-module •

yarn.lock and package-lock.json both included

Is there any particular reason two lockfiles are included? yarn prints the following warning on install:

warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.

yaki4 posted a new bug report

apollo-module •

apollo client doesn't update when store update

Version

v4.0.0-rc.3

Reproduction link

https://grapheader-nmsrtiwlue.now.sh/

Steps to reproduce

Increment value in store with one of the two buttons.
The first one will refetch the first query and the second one will execute the second query.

What is expected ?

Apollo client use updated store value.

What is actually happening?

Apollo client use old store value.
I have to reload my window to use the new client.

Additional comments?

The first time i had this bug was with i18n, my headers was not set correctly with the new lang.
You can find a repo here https://gitlab.com/yaki4/grapheader.git

yaki4 posted a new question

apollo-module •

apollo client doesn't update when store update

I used the store to pass specific header in my application. But, when i update the value my apollo client still use the old value.

I first notice this bug with i18n when i change language but i have this bug with a simple value change in store.
You can check a repo here and a test project there .
If you watch your network in debug tools you will see that the request headers are still the same for a new or a refetch query.

lrosa007 posted a new bug report

apollo-module •

defaultClientConfig is not a function when using absinthe socket

Version

v4.0.0-rc.2

Reproduction link

https://github.com/lrosa007/apollo-module-example

Steps to reproduce

clone the repo
enter the folder
yarn dev or npm run dev
try to load the root page in a browser

What is expected ?

default nuxt landing page loads normally

What is actually happening?

Displays an error claiming defaultClientConfig is not a function.

References code generated by line 39-43 in /lib/templates/plugin.js

When I comment out the absinthe socket stuff, it runs just fine. So I've been trying to figure what about that code is messing up how my plugin gets imported within nuxt.

I threw in some console logs in the generated .nuxt/apollo-module.js file and saw that the require('~/plugins/apollo.js') is returning something odd.

Additional comments?

I'll probably also make an issue in the repo for absinthe

ManUtopiK resolved the question #c173

apollo-module •

Apollo Client Developer Tools blank page

Finaly, I found a solution here: https://github.com/apollographql/apollo-client-devtools#debugging

ManUtopiK posted a new question

apollo-module •

Apollo Client Developer Tools blank page

I cannot get working the Apollo Client Developer Tools 2.1.5. My nuxt.config.js seems good :

apollo: {
  clientConfigs: {
    default: {
      httpEndpoint: 'http://localhost/mywebsite/graphql/',
      connectToDevTools: true
    }
  }
}

Nuxt and apollo works well together. But if I want to see the apollo console in the chrome devtools, i got a blank page. I took a look in the devtools of the devtools and I see this message :

Error in event handler for (unknown): SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
at new e (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/devtools.js:1:907187)

Anybody else is facing this issue?

ManUtopiK posted a new question

apollo-module •

How to prevent SSR graphQL error

In a component, I got this query:

apollo: {
    post: {
      query: gql`
        query Post($id: ID!) {
          post(id: $id) {
            title
            content
          }
        }
      `,
      prefetch: ({ route }) => {
        return {
          id: route.params.id
        }
      },
      variables() {
        return {
          id: this.$route.params.id
        }
      }
    }
}

It's working like a charm 🙂
But, if I'm quering a post ID that doesn't exists, there is a NuxtServerError "GraphQL error: No resource could be found".
So, How can I prevent this error and redirect to the 404 page.
I tried with error(e) param but it does nothing more…
Thanks.

ardian-c posted a new question

apollo-module •

Api Key for Apollo Engine

Hi all,

I am trying to integrate Apollo Engine with Nuxt and I need to add the API key, but I don't know how can I do that. I see that in nuxt.config it is a part for Apollo Engine, however, I don't know where I should specify the Apollo Engine API key.

Thanks

mydesireiscoma posted a new question

apollo-module •

How to fill the page with data before navigate, like the asyncData method does?

Usually, data requested in the asyncData method are requested before navigate.

Let's say, I have two pages - main and todos and I use apollo property for request some data from server (its a simple request with no parameters) on the todos page

  apollo: {
    todos: {
      query: api.todos.all,
      prefetch: true
    }
  }

It works like this:
(if i navigate to the todos from the main page)

Page loaded
Data requested

(if i went to the todos page directly)

Data requested
Page loaded

In the first case, I see an empty page for the first time, and only when request is finished, the page is filled with data
But if I manually request data in the asyncData - everything works as I expected - i.e., if I navigate from the main page to the todos page:

Data requested
Page loaded

So, my question is: how to fill the page with data before navigate, like the asyncData method does?

bahamagician posted a new question

apollo-module •

Refresh Token

Hi,

I've been able to authenticate a user, get a token and set it. However, how would I handle token refresh? The tokens I'm using expire every 15 minutes. Any help would be greatly appreciated.

-=Chris

ewheel17 posted a new question

apollo-module •

$apolloHelper.onLogin() not setting cookie with root domain.

I am using $apolloHelper.onLogin() to set my apollo-token cookie, but it isn't letting me set the cookie location to the root domain.

My line of code:
this.$apolloHelpers.onLogin(token, '.myrootwebsite.net');

What I expect on the cookie:
Domain: '.myrootwebsite.net'

What I get:
Domain: 'staging.notroot.myrootwebsite.net'

I have also tried 'myrootwebsite.net' in the second param without success.

zhilyaev posted a new question

apollo-module •

How can I use "Authorization: Bearer my-personal-token"?

I try to connect Github api v4 with nuxt-apollo-module.

nuxt.config.js

apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: 'https://api.github.com/graphql',
        getAuth: () => 'bearer my-personal-token'
      }
    }
  },

index.vue

methods: {
    async foo () {
      // receive the associated Apollo client
      const client = this.$apollo.getClient()
      console.log(client)

      // but you could also call queries like this:
      let query = gql`query { viewer { login }}`
      let { data } = await this.$apollo.query({ query })
      console.log(data)
    }
  }

But I get an error 401
And my header "Authorization: Bearer token" is not sent

For example correct request with axios

async asyncData ({ app }) {
    const token = 'my-personal-token'
    let { data } = await app.$axios.post(
      'https://api.github.com/graphql',
      {
        query: 'query { viewer { login }}'
      },
      {
        headers: { Authorization: 'Bearer ' + token }
      })
    return { items: data }
  }