Response always returns null?

[jimmiejackson414-zz]

Apologies for opening another issue, but I'm really hoping I can get this library to work.

In a page, I'm running this fetch function:

async fetch ({ env, $graphql, req }) {
  const payload = {
    requestHeaders: { authorization: handleCookies.get('gc-token', req.headers.cookie) }
  };
  const res = await userService.currentUser(payload);
},

And in that service file, I'm running this:

import { GraphQLClient } from 'graphql-request';
import ME_QUERY from '~/apollo/queries/user/me.gql';

const url = process.env.NUXT_ENV_BACKEND_API_URL;
const client = new GraphQLClient(url);

async function currentUser ({ requestHeaders }) {
  await client.request(ME_QUERY, {}, requestHeaders)
    .then(data => console.log('currentUser data: ', data))
    .catch(e => console.log('ERROR: ', e));

  User.insertOrUpdate({ data: { ...currentUser } });
  return currentUser;
}

And my nuxt.config.js looks like this:

export default {
  buildModules: [
    'nuxt-graphql-request',
    '@nuxtjs/eslint-module',
    '@nuxtjs/vuetify',
    '@nuxtjs/style-resources'
  ],
  graphql: {
    endpoint: process.env.NUXT_ENV_BACKEND_API_URL
  },
}

For some reason, all of my requests are just returning null. I know that data exists, and I can correctly return it in graphql-playground. I tried moving the entire service function back over to the main fetch call in the page, but it has the same results. Is there anything obvious I'm missing here?

[drewbaker]

You're making this way harder on yourself. This is all you need to do:

nuxt.config.js https://github.com/funkhaus/fuxt/blob/master/nuxt.config.js#L103-L109

asyncData https://github.com/funkhaus/fuxt/blob/master/templates/page-default.vue#L30-L37

fetch https://github.com/funkhaus/fuxt/blob/master/components/WpSeo.vue#L68-L71

[jimmiejackson414-zz]

Going off your examples, I wrote the following in my default layout:

async asyncData ({ $graphql, req }) {
  console.log({ $graphql });
  console.log({ req });
  const requestHeaders = {
    authorization: handleCookies.get('gc-token', req.headers.cookie)
  };
  console.log({ requestHeaders });
  const data = await $graphql.request(ME_QUERY, {}, requestHeaders);
  console.log({ data });
  return { data };
},

but not a single one of those console logs is being hit which is super weird. I tried removing node_modules and reinstalling everything, but it's the same result.

By the way, the reason I'm wanting to move functions out into a separate service function eventually is because I'm wanting to do some additional Vuex work, and would like to keep my pages/components as lean as possible.

[drewbaker]

Async data doesn’t run client side, so you’ll need to look in your terminal for the logs.

Can you get a codesandbox setup going so we can see?

[jimmiejackson414-zz]

Yeah I'm looking at the terminal logs and don't see anything. I'll work on getting a codesandbox together, hopefully I can replicate it there.

[jimmiejackson414-zz]

Ok I think I got it to a workable and reproducible state: Codesandbox link.

[jimmiejackson414-zz]

So after a few more hours, I think I'm at a spot where everything is running smoothly. Essentially, I kept seeing whispers that asyncData wasn't working properly for layout pages (those were back in the summer, so I'm not sure whether that's still accurate). That led me to try moving things over to nuxtServerInit in my store index, and voila... stuff works now. Kind of a bumpy road for me getting this to work right off the bat, but once this worked I got several other methods immediately working too. Apologies again for basically turning this into StackOverflow, but I also appreciate the help. Cheers!

export const actions = {
  async nuxtServerInit ({ commit }, { $cookies, $graphql, req }) {
    const token = $cookies.get('gc_token');

    if (!token) {
      commit('logout');
      return;
    }

    const requestHeaders = { authorization: `Bearer ${token}` };
    const { currentUser } = await $graphql.request(ME_QUERY, {}, requestHeaders);
    commit('setCurrentUser', currentUser);
  }
};