Query relationships within Apollo/Client

Question

I am trying to query my categories within my product. I created a table in which I want to see the categories of my product table. I am using Prisma as my typeORM and Apollo as a way to query my Postgres database. Please see the attached photo of my table. I have categories that are within my Product model.

Here is my query function using my UseQuery Hook from Apollo/Client.

const AllProductsQuery = gql`
    query {
        products {
            id
            name
            description
            img
            price
            ingredients
        
            categories {
                id
                name
            }
        }
    }
`

What I thought this would do was since I am querying the categories within the products I would be able to hit that information. However, it isn't even console logging that data.

This is what I have

<Table  striped bordered hover >
                <thead>
                <tr>
                 <th>Product</th>
                 <th>Category</th>
                 <th>Price</th>
                 
                 </tr>
                </thead>
                
               
        {data  && data.products.map((product: Product, categories: Category) => {
            return (
                
              
               <tbody>
                <tr>
                    <td>{product.name}</td>
                    <td>{product.categories.name}</td>
                    <td>{product.price}</td>
                </tr>
                </tbody>
             
               
               
              
            )
            
        })}
        
        </Table>

However this doesn't even show the categories information within my products within the console log. The Product.name and Product.price work perfectly however, I try to run the same thing with product.categories.name doesn't work. Any information would be great!

Answer 1

In this code that you sent you're renaming product to Product in the data.products.map.

If you received categories from server, as I asked you in the comment, try this code

      <Table striped bordered hover>
        <thead>
          <tr>
            <th>Product</th>
            <th>Category</th>
            <th>Price</th>
          </tr>
        </thead>

        {data &&
          data.products.map((product) => {
            return (
              <tbody>
                <tr>
                  <td>{product.name}</td>
                  <td>{product.categories.name}</td>
                  <td>{product.price}</td>
                </tr>
              </tbody>
            );
          })}
      </Table>