Vue.js apollo graphql sends request to localhost instead to certain endpoint

问题

I configured a multiclient vue apollo, but for some reason it sends requests only to localhost. However I never specified a localhost endpoint. Here is my config file
vue-apollo.js:

import Vue from "vue";
import VueApollo from "vue-apollo";

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

Vue.use(VueApollo);
const AUTH_TOKEN = "apollo-token";
const httpsEndpoint =
  process.env.VUE_APP_GRAPHQL_HTTPS || "https://myst.endpoint.prod/graphql";

export const filesRoot =
  process.env.VUE_APP_FILES_ROOT ||
  httpsEndpoint.substr(0, httpsEndpoint.indexOf("/graphql"));

Vue.prototype.$filesRoot = filesRoot;


const defaultOptions = {

  httpsEndpoint,

  wssEndpoint:
    process.env.VUE_APP_GRAPHQL_WSS || "wss://myst.endpoint.prod/graphql",

  tokenName: AUTH_TOKEN,

  persisting: false,

  websocketsOnly: false,

  ssr: false
};
const clientAOptions = {
  httpsEndpoint: "https://myst.endpoint.prod/graphql"
};
const clientBOptions = {
  httpsEndpoint: "https://mynd.endpoint.prod/graphql"
};

export function createProvider(options = {}) {

  const createA = createApolloClient({
    ...defaultOptions,
    ...clientAOptions
  });
  const createB = createApolloClient({
    ...defaultOptions,
    ...clientBOptions
  });

  const a = createA.apolloClient;
  const b = createB.apolloClient;


  const apolloProvider = new VueApollo({
    clients: {
      a,
      b
    },
    defaultClient: a,
    defaultOptions: {
      $query: {
      
      }
    },
    errorHandler(error) {

      console.log(
        "%cError",
        "background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;",
        error.message
      );
    }
  });

  return apolloProvider;
}


export async function onLogin(apolloClient, token) {
  if (typeof localStorage !== "undefined" && token) {
    localStorage.setItem(AUTH_TOKEN, token);
  }
  if (apolloClient.wsClient) restartWebsockets(apolloClient.wsClient);
  try {
    await apolloClient.resetStore();
  } catch (e) {

    console.log("%cError on cache reset (login)", "color: orange;", e.message);
  }
}


export async function onLogout(apolloClient) {
  if (typeof localStorage !== "undefined") {
    localStorage.removeItem(AUTH_TOKEN);
  }
  if (apolloClient.wsClient) restartWebsockets(apolloClient.wsClient);
  try {
    await apolloClient.resetStore();
  } catch (e) {
    
    console.log("%cError on cache reset (logout)", "color: orange;", e.message);
  }
}

I edidted this file according to documentation. Why does apollo send request to wrong endpoint and how to fix it? I edidted this file according to documentation. Why does apollo send request to wrong endpoint and how to fix it? I edidted this file according to documentation. Why does apollo send request to wrong endpoint and how to fix it?

来源：https://stackoverflow.com/questions/63645528/vue-js-apollo-graphql-sends-request-to-localhost-instead-to-certain-endpoint

标签

Vue.js

graphql

apollo