Manual mode seems activated

[Ouradze]

Hello,

I used the vue plugin to install vue apollo, I currentlu have the following version:

• "vue-apollo": "^3.0.0-beta.21"
• "vue-cli-plugin-apollo": "^0.16.4"

My vue-apollo.js file is the following:

import Vue from 'vue';
import VueApollo from 'vue-apollo';
import { createApolloClient, restartWebsockets } from 'vue-cli-plugin-apollo/graphql-client';

// Install the vue plugin
Vue.use(VueApollo);

// Name of the localStorage item
const AUTH_TOKEN = 'apollo-token';

// Http endpoint
const httpEndpoint = process.env.VUE_APP_GRAPHQL_HTTP || '/graphql/';

// Config
const defaultOptions = {
  httpEndpoint,
  wsEndpoint: null,
  tokenName: AUTH_TOKEN,
  persisting: false,
  websocketsOnly: false,
  ssr: false,
};

// Call this in the Vue app file
export function createProvider(options = {}) {
  // Create apollo client
  const { apolloClient, wsClient } = createApolloClient({
    ...defaultOptions,
    ...options,
  });
  apolloClient.wsClient = wsClient;

  // Create vue apollo provider
  const apolloProvider = new VueApollo({
    defaultClient: apolloClient,
    defaultOptions: {
      $query: {
        // fetchPolicy: 'cache-and-network',
      },
    },
    errorHandler(error) {
      // eslint-disable-next-line no-console
      console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message);
    },
  });

  return apolloProvider;
}

And the main.js is this one:

import Vue from 'vue';
import App from './components/App/App.vue';
import router from './router';
import { createProvider } from './vue-apollo';

Vue.config.productionTip = false;

new Vue({
  router,
  provide: createProvider().provide(),
  render: h => h(App),
}).$mount('#app');

When I try in a component to do a query, it is as if I had the manual mode was activated:

import gql from 'graphql-tag';

const allTodoLists = gql`
  query{
    allTodoLists {
      id
      title
      creator {
        id
        username
      }
      createdAt
    }
  }
`;

export default {
  name: 'todo-list',
  apollo: {
    todoLists: {
      query: allTodoLists,
    },
  },
  data() {
    return {
      todoLists: '',
    };
  },
};

In the console, I get this error: Missing todoLists attribute on result Object { allTodoLists: (1) […], … }.

Am I missing something somewhere ? Thanks in advance for your help !

[Ouradze]

It seems I was not using the correct way to write my query:

  query{
    todoLists: allTodoLists {
      id
      title
      creator {
        id
        username
      }
      createdAt
    }
  }
`;

Maybe it could be mentioned somewhere in the documentation. Sorry for the noise !

[Akryum]

Since you can have multiple fields in a single query, vue-apollo just tries to pick the one with the same name as your key. In your example, that would be todoLists. Since in your OP you had allTodoLists in the result instead, it couldn't find it.