title: Data Relationships and Connection Types with Mutations in Prisma, GraphQL, and Apollo
body: <p>Sorry for the long post, but I tried to be as detailed as possible.</p>
  
  <p><strong>How can I edit my current model, schema, and resolver to be able to save/connect a related type (Vendor) to my created type (Item) via a web form?</strong></p>
  
  <p>I want to create an inventory item and select a vendor to be associated with that item. </p>
  
  <p>I have a Prisma data model like so (I've other fields for simplicity because I have no trouble saving the other fields; it's just with other types where there is a relation)...</p>
  
  <p>Items may or may not have a vendor associated with them. Vendors may or may not have a list of items currently associated with them.</p>
  
  <pre><code>type Item {
    id: ID! @id
    name: String!
    description: String!
    vendor: Vendor
  }
  
  type Vendor {
    id: ID! @id
    items: [Item!]
  }
  </code></pre>
  
  <p>I have a graphql schema like this (compare to modified schema at the end of this question)...</p>
  
  <pre><code>type Mutation {
    createItem(
      name: String! 
      description: String! 
    ): Item!
  }
  </code></pre>
  
  <p>My resolver:</p>
  
  <pre><code>async createItem(parent, args, ctx, info) {
    const item = await ctx.db.mutation.createItem(
      {
          data: {
              ...args,
          },
      }, info);
  
      return item;
  }
  </code></pre>
  
  <p>My React component contains the following:</p>
  
  <pre><code>const CREATE_ITEM_MUTATION = gql`
    mutation CREATE_ITEM_MUTATION(
      $name: String!
      $description: String!
    ) {
      createItem(
        name: $name
        description: $description
      ) {
        id
        name
        description
        vendor {
          id
        }
      }
    }
  `;
  const ALL_VENDORS_QUERY = gql`
    query ALL_VENDORS_QUERY {
      vendors {
        id
      }
    }
  `;
  </code></pre>
  
  <p>Later on down the web page in my HTML form, I have:</p>
  
  <pre><code>&lt;Query query={ALL_VENDORS_QUERY}&gt;
    {({ data, loading }) =&gt; (
      &lt;select
        id="vendor"
        name="vendor"
        onChange={this.handleChange}
        value={this.state.vendor}
      &gt;
        &lt;option&gt;Vendor&lt;/option&gt;
          {data.vendors.map(vendor =&gt; (
            &lt;option key={vendor.id} value={vendor.id}&gt;{vendor.name}&lt;/option&gt;
          ))}
      &lt;/select&gt;
    )}
  &lt;/Query&gt;
  </code></pre>
  
  <p>I just don't know how to connect the vendor to the item through a form submission. I can get it working if I hard code the vendor id in my resolver like so:</p>
  
  <pre><code>async createItem(parent, args, ctx, info) {
    const item = await ctx.db.mutation.createItem(
      {
          data: {
              vendor: {
                connect: { id: "ck7zmwfoxg4b70934wx8kgwkx" } // &lt;-- need to dynamically populate this based on user input from the form
              },
              ...args,
          },
      }, info);
  
      return item;
  }
  </code></pre>
  
  <p>...but that obviously is not what I want.</p>
  
  <p>To me, it makes the most sense to modify my schema like so:</p>
  
  <pre><code>createItem(
    name: String!
    description: String!
    vendor: Vendor &lt;--- added
  ): Item!
  </code></pre>
  
  <p>But when I do that I get this:</p>
  
  <p><code>Error: The type of Mutation.createItem(vendor:) must be Input Type but got: Vendor.</code></p>
  
  <p><strong>How can I edit my current model, schema, and resolver to be able to save/connect a vendor ID that is selected on the form?</strong></p>