Randy_Johnson's avatar

ReactJS Using Eloquent Syntax

If I sent down some data with relationships, if there a way I can access these relationships on the page. Right now I am eloquenting (did I just coin this?) my way into a specific model, adding this data into an array and passing down that array.

Is there an easier was, since taking into account what I have just said, I would have to organize and send down multiple arrays.

0 likes
8 replies
Sinnbeck's avatar

You simply load it User::with('posts')->get();

and in react, if you are mapping over users with user.map((user) => ...) you can access posts like user.posts.map((post) => ...)

{
  users.map((user) => {
      return (
        <ul>
           {user.posts.map((post) => {
                return <li key={post.id}>{post.name}</li>
             })
           }
        </ul>
     ) 
  })
}
1 like
Sinnbeck's avatar

But I highly recommend using api resources to format it however you want :)

Randy_Johnson's avatar

@Sinnbeck Yes, this is what I should do. But I have a little problem.

i. I am adding from the Product Component which is adding it to a Cart DB. ii. On the Cart Component I am fetching it from the database, as shown before which I will now change to resource API.

My question is, is how am I to tell this component to refresh, before I was using context, and when I updated the context the useEffect would detect the update.

Would it be correct in me saying that I should not only post request to the server for a db update, but also have a context working to allow the Cart Component to know whan to request api again?

Sinnbeck's avatar
Sinnbeck
Best Answer
Level 102

@Randy_Johnson You just post the data to some endpoint that saves it (post or put), and then return redirect back(). This should tell inertia to reload the data on that page, with the updates. This is how I do it on a ton of pages.

You can tell inertia to only reload certain things, if needed

router.post('/some-route', data, {only: ['posts'])
1 like
Randy_Johnson's avatar

I tried with the redirect back with no luck, I will show my code

ItemController

public function store(StoreItemRequest $request)
    {
        $validated = $request->validate([
            'id' => 'required|min:1|max:5',
        ]);

        $cart = Cart::where('id', '=', Auth::user()->id)->first();

        $item = Item::where('product_id', '=', $validated['id'])->get();
    
        if ($item->isNotEmpty()) 
        {
            $item = Item::find($validated['id']);
            $item->amount = $item->amount + 1;
            $item->save();
        } else 
        {
            $item = new Item;
            $item->cart_id = $cart->id;
            $item->product_id = $validated['id'];
            $item->amount = 1;
            $item->save();
        }

        return redirect()->back();
    }

CartController

    public function index()
    {
        $products = [];
        $cart = Cart::where('user_id', '=', Auth::user()->id)->first();

        foreach ($cart->items as $item) 
        {
            array_push($products, $item->product);
        }

        return $products;
    }
Sinnbeck's avatar

@Randy_Johnson That index function is not inertia? It should always return an inertia response (or a redirect) for inertia to work

public function index()
{
    return Inertia::render('SomePage', [
          'cart' => Cart::with('items')->where('user_id', '=', Auth::user()->id)->first()
    ]);
}

If you dont actually use inertia, my inertia specific suggestion wont work :)

1 like
Randy_Johnson's avatar

@Sinnbeck Yes, sorry, it is Inertia I am using. Just very new to it.

    public function store(StoreItemRequest $request)
    {
        $validated = $request->validate([
            'id' => 'required|min:1|max:5',
        ]);

        $cart = Cart::where('id', '=', Auth::user()->id)->first();

        $item = Item::where('product_id', '=', $validated['id'])->get();

        if ($item->isNotEmpty()) {
            $item = Item::find($validated['id']);
            $item->amount = $item->amount + 1;
            $item->save();
        } else {
            $item = new Item;
            $item->cart_id = $cart->id;
            $item->product_id = $validated['id'];
            $item->amount = 1;
            $item->save();
        }

        return Inertia::render('Products');
    }

I have this in hope that the full page just refreshes, but still nothing is happening. If I use 'Welcome' instead, of course it jumps off to the welcome page. I am just making baby steps at the moment. If I go too fast, I fall even faster.

Sinnbeck's avatar

@Randy_Johnson Ah ok good :) But let me know if you cannot get it working. I work on this stack every day, so I can perhaps give you some examples or help debug if needed

Please or to participate in this conversation.