How can I create a Relation between two fields when I have one of the fields being populated in the frontend?

prisma

#1

Hello, I am new to Prisma. I need some help seeing if I am approaching my issue incorrectly…

The scenario I have is the following:
In the front-end a user can create something called a “Collection” , this basically stands for the name of a folder. Once the user creates a collection they can click into it. Now the URL changes into something like


http://localhost:7777/collection?id=cjoxrjjc9kumc0a71y5wfj8yj ) …


the id : cjoxrjjc9kumc0a71y5wfj8yj being the unique id of the collection. Now that the user clicked into the collection they have the option to create an “Item”.

I want the users “Item” they create to know which “Collection” it belongs too. My approach to do this was to pass the unique URL collection ID to the item component in the front-end.

So now the State of the CreateItem component is something like this:

  state = {
    title: '',
    description: '',
    link: '',
    parent: this.props.id // <--- This is where the unique Collection Id is set
  };

When I inspect this element in the React Dev tools, the Collection ID is being populated correctly inside of this Items State.

Okay, this is where my confusion starts. I know that I need to create some sort of relationship between the Collection and the Item in my backend…

This is what I have so far that makes this work:


datamodel.prisma:

type Collection {
  id: ID! @unique
  title: String!
}
type Item {
  id: ID! @unique
  parent: String!    // <----------- I know this is wrong but it works
  title: String!
  description: String!
  link: String!
}

schema.graphql:

type Mutation {
  createItem(
    title: String, 
    description: String, 
    link: String, 
    parent: String): Item! // <----------- I know this is wrong but it works
}


CreateItem.jsx Component in Front-end

const CREATE_ITEM_MUTATION = gql`
  mutation CREATE_ITEM_MUTATION(
    $title: String!
    $description: String!
    $link: String!
    $parent: String  // <----------- I know this is wrong but it works
  ) {
    createItem(
      title: $title
      description: $description
      link: $link
      parent: $parent  // <----------- I know this is wrong but it works
    ) {
      id
    }
  }
`;


But I know the above code is wrong because this has no Relation created between Collection and Item . And their should be a relationship since the item field named “parent” is going to hold the Collection Id, so we can know which Collection the Item is placed in.


… So I want to change the above code to try to create a relationship between “Item” and “Collection”, but I start trying to do that and become lost as to how :


datamodel.prisma:

type Collection {
  id: ID! @unique
  title: String!
}
type Item {
  id: ID! @unique
  parent: Collection! @relation(name: "CollectionItemBelongsIn", onDelete: SET_NULL)   // <---- Made a Relation 
  title: String!
  description: String!
  link: String!
}

schema.graphql:

type Mutation {
  createItem(
    title: String, 
    description: String, 
    link: String, 
    parent: String): Item! // <---- What do I Change this too  ????
}


CreateItem.jsx Component in Front-end

const CREATE_ITEM_MUTATION = gql`
  mutation CREATE_ITEM_MUTATION(
    $title: String!
    $description: String!
    $link: String!
    $parent: String  //  <---- What do I Change this too  ????
  ) {
    createItem(
      title: $title
      description: $description
      link: $link
      parent: $parent  // < ---- What do I Change this too  ????
    ) {
      id
    }
  }
`;