Query Data by Property with GraphQL and Fauna in Next.js
It would be great to show a list of shops that a vendor has created. To do this we will need to create a new query getShopsByOwnerId that accepts a string that will be our user id. Like before, we'll merge this schema change into Fauna and update our roles to make this request.
On the frontend we'll create a shop list component and pass in the user token that Auth0 gives us for the logged in user.
Shadid Haque: [0:00] In our manage-shop page, it would be nice to get all the shops that belongs to current logged-in user. We want to query all the shops by ownerID.
[0:08] Now, back in our Fauna, if we go to our GraphQL Playground and explore these queries, we notice that we don't really have a query to getShopsByOwnerID.
[0:18] Let's go ahead and fix that. We're going to go to our schema. Here, we're going to create a new query. Let's name this query, getShopsByOwnerID. For arguments, we are going to pass in a ownerID, which is going to be a string type. For the return types, we are going to have a array of shops.
[0:43] We're going to save the schema and merge our updated schema. Notice that now you have a new query to getShopsByOwnerID. Next, we're going to go to Security, and then we're going to go to Roles and give our FrontEndRole permission to make this new query.
[1:08] Next, we're going to go back to our code and we're going to go to the manage-shop page. Here we're going to import gql and useQuery from apollo/client. We're going to import useUser from auth0.
[1:32] Then, we're going to define a new query, and let's name this, GET_SHOPS_BY_OWNER. We're going to pass in the ownerID as our argument. For return sub-selection, we're just going to return id and the name of the shop.
[1:52] In our component, we're going to call the useUser hook and destructure user. We're going to make our query. In the variables, as ownerID, we're going to pass in the user?.sub.
[2:07] We're going to get back an array of shops from this query. We're going to pass this result as props into a component called ShopList. If there is no data, we can just return a div with loading text. This component will be displaying the list of the shops.
[2:36] Let's go ahead and create this component. Under components folder, I'm going to create a new file called ShopList.tsx. I'm going to paste in some pre-written code for this component here. The code for this component will be provided with the lesson notes.
[2:52] Let's go over the component code. The component loops over its shops prop. For each shop, it renders the name of the shop and two buttons, which are Add Product and Delete Shop.
[3:04] Let's import this component to our manage-shop page. Now, you're able to see the list of shops that belongs to this user.