How to make GraphQL playground not display selected options?

Question

I have this view in the playground:

But when I try to add another option to select, I hit CTRL + space and I see every single possible option, even the ones already selected.

How can I stop that from happening? In the dropdown I'd like to see only the options I still can select, not the ones already selected.

Here's my index.ts

const app = express();

(async () => {
  const schema = await buildSchema({ resolvers: [ UserResolvers ] });

  const server = new ApolloServer({ schema });

  server.applyMiddleware({ app });
  createConnection({
    type: 'mysql',
    ...dbData,
    entities: [
      Availability,
      Chat,
      Meeting,
      Message,
      Offer,
      Tag,
      User,
    ],
    synchronize: true,
    logging: true,
  })
    .then(() => {
      app.listen({ port: 4000 }, () => {
        console.log(
          ` Server ready at http://localhost:4000${ server.graphqlPath }`,
        );
      });
    })
    .catch((error) => console.log(error));
})();

Answer 1

There is no option to change this behavior. You can open an issue in the GraphiQL repo (GraphQL Playground is effectively deprecated and will be merged into GraphiQL) to request this feature.

However, it's also unlikely that such a feature will ever be supported. Duplicate field names are perfectly valid in GraphQL. In addition, it's not uncommon to request the same field multiple times using a different alias and a different set of arguments for each instance of the field:

query {
  activeUsers: users(isActive: true) {
    ...UserFragment
  }
  inactiveUsers: users(isActive: false) {
    ...UserFragment
  }
}

In that context, omitting a field from the list of suggestions just because it was already included in the selection set doesn't really make sense.