How can I hide selected options in GraphQL playground?

I'm facing an issue in the playground with my view. When I try to add another option to select, pressing CTRL + space shows me every possible option, including the ones already selected.

Is there a way to prevent this behavior? I only want to see the available options in the dropdown, not the ones that are already chosen.

Below is the content of my index.ts file:

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

If you're looking to modify this behavior, unfortunately there isn't a straightforward option available. One possible course of action is to submit an issue in the GraphiQL repository (note that GraphQL Playground is on its way out and will eventually be incorporated into GraphiQL) to propose the inclusion of this particular feature.

Nonetheless, it's important to consider that the likelihood of such a feature being implemented is slim. Within the realm of GraphQL, having duplicate field names is considered acceptable. Furthermore, it's not uncommon for users to request the same field multiple times using distinct aliases and varying arguments for each occurrence:

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

In this scenario, excluding a field from the recommendations simply because it has already been included in the selection set may not align with the practicality of GraphQL.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Absence of "Go to Definition" option in the VSCode menu

I'm currently working on a Typescript/Javascript project in VSCODE. Previously, I could hover my mouse over a method to see its function definition and use `cmd + click` to go to the definition. However, for some unknown reason, the "Go to Definition" ...

Prevent saving the file until all the categories have been chosen

We have recently updated our file list by adding a new file category column. Our aim now is to prevent users from saving the form until a category has been assigned to each file. However, I am unsure how to check for the presence of a value in each file ...

Refresh the database values every five minutes

I am currently developing a web application that assigns users a ranking based on their activity on Twitter and on my website. For this reason, I want to update their rank every five minutes by retrieving their latest Twitter activity and updating it in m ...

Submitting the Vue-material stepper

Is there a way to properly submit a vue material stepper component? I attempted to enclose the md-stepper tag within a form tag like this: <form @submit="onSubmit"> <md-stepper md-vertical class="stepper"> ... </md-stepper> </ ...

Is it possible to use optional destructured arguments in a Typescript function?

Is there a way to create a function that accepts an optional object argument using destructuring in Typescript? myFunction({opt1, opt2}?: {opt1?: boolean, opt2?: boolean}) The error message "A binding pattern parameter cannot be optional in an implementa ...

Issue with using useState inside alert: unexpected empty array

I am facing an issue with the 'exercises' useState in my code. The useEffect function correctly prints the 'exercises' after every change, but when I press the 'Finish' button, the 'exercises' suddenly become empty. ...

The Module Design Pattern in Jquery

In my project, there is a jQuery module pattern that I am having trouble understanding its purpose. There is also a custom plugin called jquery.skInit.js (function($) { $.fn.skInit = function() { return this.each(function(i,element) { var e = ...

Modified the object path and updated the Dirty stages for nested objects within Vue state

Imagine having an object that contains arrays of objects in some properties. Whenever changes are made to any field, whether it's within an object in an array or the main object itself, you want to mark that object as "dirty" using a code snippet like ...

How can one effectively outline the structure of a document within firestore?

Currently, I am enclosing my calls to Firebase within a function so that I can specify the return type within the function. This allows me to define the type of data being retrieved from a document. However, TypeScript complains if you do not convert the F ...

Guide on changing the font size of a selected tab in material-ui

My requirement specifies that the active tab should be styled with a specific color and font size only. Here is my code snippet: <Tabs value={value} onChange={handleChange} ...

Accessing process.env in Nest.js controllers

Is there a way for me to access process.env.SOME_FIELD in nest.js? app.module.ts ... modules: [ ... ConfigModule.forRoot({ envFilePath: '.env.' + process.env.APP_CODE }), CatModule ... ] ... CatController.ts ...

The XML data is valid, however the responseXML property in the XMLHttpRequest response is null

Click here to access the API URL, which returns XML data. However, the responseXML property in the XMLHttpRequest response is coming back empty. How can I retrieve the XML data from the response? document.body.onload = loadXMLDoc(); function loadXMLDoc ...

Understanding the flattening process of arrays using JavaScript - Detailed explanation required

Currently, I am immersed in the captivating world of Eloquent JavaScript. However, I have hit a roadblock with one of the exercises that involves flattening a multi-dimensional array. Despite my best efforts, I have been unable to crack the code. After f ...

Include a new feature within an onClick event

I'm looking to implement a single page application using React.js and I want to incorporate a list within a material-ui drawer. The goal is to dynamically add elements to an array every time a button is clicked, but I'm stuck on how to write this ...

Building custom components in Vue.js/NuxtJS can be a breeze when using a default design that can be easily customized through a JSON configuration

Currently, I am in the process of developing a NuxtJS website where the pages and components can either have a generic design by default or be customizable based on client specifications provided in the URL. The URL structure is as follows: http://localh ...

Employing promises for fetching data via XHR results in a promise that is still pending

Currently, I am experimenting with promises to handle asynchronous requests using XHR. Interestingly, I noticed that when I try to log the result within the .then function, it works perfectly fine. However, if I attempt to log it outside of this scope, it ...

The specified data type is not compatible with the current context and cannot be treated as an array

Just starting out with TypeScript and I've encountered an issue that's preventing me from successfully building my app. Everything runs smoothly on my local environment, but as soon as I try to build it, an error pops up. Here's a snippet o ...

MongoDB table collections (table names in other databases)

After setting up my express server to connect to mongodb, I encountered an issue despite everything working fine initially. I created a collection in my mongodb called projects (plural form). In my project.model.js file, I defined the model as follows: c ...

Is it possible to populate a div using jQuery Datatable?

Seeking help with jQuery datatable as a newbie. How can I populate divs instead of tables with the data from an ajax call? The structure should resemble a table: <div id="wrap"> <div class="drow"> <div class="dco ...

How to Generate a Unique URL in Angular 7 Using Typescript

I'm struggling to display or download a .pdf file in my Angular 7 project due to issues with window.URL.createObjectURL. Here's the code snippet I've written: this.userService.getFile(report.id).subscribe( res => { console.log(res) ...