Query relationships within Apollo/Client

Help
,
1

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!

image
image1299Ă—143 3.03 KB

2

Hello! As a first thought, it looks like product.categories would return a list of categories, and that list wouldn’t have a direct property called name.

Instead, you might need product.categories.map(...) inside that td.

Additionally, check the Network tab of your browser to confirm that your server’s response actually includes this list of categories. If it doesn’t, something might be up with your backend resolvers for those fields.

1 Like
3

That was it thank you so much!

1 Like