vue.js - How to properly use graphql-request instead of Vue Apollo?

Question

I'm looking to replace Vue Apollo with a combination of nuxt-graphql-request to slim down my code and avoid having to use Apollo Client in favor of Vuex.

I've got a couple of issues going on:

1. All requests are returning null for some reason, even though I can correctly return the data from graphql-playground.

2. Handling cookies is proving problematic because they are undefined on the server. I've tried various libraries such as js-cookie and cookie-universal-nuxt. What is the proper way to retrieve cookies on the server render?

Here's an example of where I'm attempting to fetch some data.

default.vue (layout):

import ME_QUERY from '~/apollo/queries/me.gql';
import { handleCookies } from '~/helpers';

export default {
  async fetch () {
    const { context } = this.$nuxt;
    const requestHeaders = {
      authorization: handleCookies.get('gc-token', context.req.headers.cookie)
    };
    const { currentUser } = await this.$graphql.request(ME_QUERY, {}, requestHeaders);
    console.log({ currentUser });
  },
}

This returns null, and I'm not entirely sure why.

I've also tried using asyncData, but am not able to get it to display any console logs whatsoever (I think because it's a layout).

Has anybody gotten this library to work in a Nuxt app?

Answer 1

等待大神答复