Apollo vsCode extension config file with Vite React and module.export = {}

Help
1

I created a React project with Vite, and I’d like to use Apollo extension to get autocompletion for my GraphQL queries.

I created a apollo.config.js config file at the root directory, with the indicated configuration :

module.exports = {
  client: {
    service: {
      name: "my-graphql-app",
      url: "http://localhost:4000/graphql",
    },
  },
};

But since my React app is of type : module , i get the error : module not found , and from the apollo extension , i get the error Service stats could not be loaded. This may be because you're missing an apollo.config.js file or it is misconfigured.

I tried to just export it like this :

const client = {
  service: {
    name: "my-graphql-app",
    url: "http://localhost:4000/graphql",
  },
};
export default client;

And later import it in my App.js , and the error about the missing config file is gone, but I get no autocompletion.

If I use it with a React app bundled with CRA, works just fine.

Thanks in advance for any help or hints!

1 Like
2

I’m hitting the same error - haven’t found a workaround yet. :frowning:

3

We cannot be the only ones! :smiling_face_with_tear:

I had to go back to using CRA to create my React app, to be able to use te extension…quite sad

4

Hi there :wave: Just wanted folks on this thread to know that we do have a tracking issue for this: don't work vite version 3 · Issue #79 · apollographql/vscode-graphql · GitHub

It’s at the top of my pile, but I do have a conference coming up this week and next so I’ll get to it as soon as I can. Feel free to follow it over on GitHub, though, for updates :slight_smile:

5

It looks like it is solved in v1.20.0. It finally detects apollo.config.cjs config file :smiling_face_with_tear:

1 Like