How can I pull data from 2 different MongDB collections?-CodePudding

I imagine this should be something easy, but I'm just new and don't know how to do this. I've tried searching for answers and have had no luck, I think I'm just not quite sure how to search for it.

I have this app that I'm working on using React, GraphQL and MongoDB. I have a modal that pops up with a form to fill out that will add a "Ticket" to the Tickets collection in the DB One of the fields in the form has a label "Customer" with a drop-down list to select the customer from. It pulls the Customer data from the Customer collection in the database. I'm pulling the customer data like this:

    // Get Customers for customer selection
  const {loading, error, data} = useQuery(GET_CUSTOMERS);

Where I'm having trouble is, I need to pull information from another collection called Material, and have a drop-down list to select the material for the ticket as well. I'm not sure how to do that. I tried adding the "GET_MATERIALS" query but then it's trying to set both the customers and the materials to data. I tried adding "data2" to that code and that doesn't work either. Can someone give me some help or at least let me know if I'm on the right track? Maybe point me into the right direction?

Here is the code for my Customer drop-down:

                <div className="mb-3">
                  <label className="form-label">Customer</label>
                  <select id="customerId" className="form-select" 
                          value={customerId} onChange={(e) => setCustomerId(e.target.value)}>
                          <option value="">Select Customer</option>
                          { data.customers.map((customer) => (
                            <option key={customer.id} value={customer.id}>
                              {customer.name} 
                            </option>
                          ) )}
                  </select>
                </div>

Any help is really appreciated.

Thanks, Nate

CodePudding user response：

There are 2 ways of doing this that I can think of.

const {loading, error, data} = useQuery(
  gql`
    query Query {
      first {
        _id
        name
      }
      second {
        _id
        name
      }
  }

`
);

const query = useQuery(
  gql`
    query Query {
      first{
        _id
        name
      }
  }
`
);
const query2 = useQuery(
  gql`
    query Query {
      second {
        _id
        name
      }
  }
`
);
console.log(query.data, query2.data)

Those {} are nothing but deconstructors. You can learn more about those here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment