Having problems with vue devserver proxy not redirecting

Question

I have a simple vue applicaition which I am running on port 8080. I also have a graphql server running on port 3000.

There is a vue component on my app which calls the function getData();

This get data function is in a another file called request.ts.

Which looks like this:

const cache = new InMemoryCache();

const apolloClient = new ApolloClient({
  connectToDevTools: true,
  uri: "/graphiql",
  cache,
});

export const fetchSites = async (): Promise<any> => {
  try {
    const where = "true";
    const { load } = provideApolloClient(apolloClient)(() =>
      useLazyQuery(SITES_QUERY, {
        variables: { where },
      })
    );
    return await load();
  } catch (e: unknown) {
    showAPIFailedNoification(e);
    return [];
  }
};

Now if I use the abolute URL localhost:3000/graphiql it gives me cors error as expected. But I have removed the absolute URL and using just /graphiql.

In my vue.config.js I have

const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,

  devServer: {
    port: "8080",
    proxy: {
      "^/graphiql": {
        target: "http://localhost:3000/",
        changeOrigin: true,
      },
    },
  },

  chainWebpack: (config) => {
    config.plugin("define").tap((definitions) => {
      Object.assign(definitions[0], {
        __VUE_OPTIONS_API__: "true",
        __VUE_PROD_DEVTOOLS__: "false",
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: "false",
      });
      return definitions;
    });
  },
});

I am expecting the proxy to work but it is not. On chrome dev tab I can see the the request which gets called is localhost:8080/graphiql.

So far am unable to figure out why the proxy is not working?

I am using vue 3 with composition API.

                                                                   .         

Answer 1

My bad I was trying to hit the GraphQL Playground API. The actual API was of a different name then the one I was trying to access.