How to use Fable Remoting with a regular web api

Hi. I am looking for an example how to consume a web api created with Giraffe via Fable Remoting.
The server has the routing defined like this.

image

the handlers looking like this.

image

Now I have a client web project that should consume the services. Which is working without an error.
This is the definition in the client.

this is the update method, it arrives at the servicesreceived OK case but fails at parsing the object

Thanks for any hint.

Could you share any details of what sort of failure you’re experiencing?

One thing that surprises me is your statement that it even arrives at the ServicesReceived Ok case, because in RequestServices you assemble a Cmd for ServicesReceived, but then it gets thrown away, and Cmd.none is returned. So I wouldn’t have expected ServicesReceived to ever be dispatched.

I agree with @ntwilson here.

It seems like you are creating a cmd but never actually using it.

About your original questions, using a regular web API using Fable.Remoting is going the painful way.

In your client, you have almost no control over the route created by Fable.Remoting, even worth for how you data is encoded. This mean that you need to make your server side compatible with how Fable.Remoting transfert the information but there is no documentation about it as this is an implementation detail from Fable.Remoting point of view.

I think it would be better if you were able to use Fable.Remoting on the server too like that you are garante to have types compatibility. You can call Fable.Remoting using normal HTTP request if you want to expose the API to the outside world and I think there is even a Swagger generator for documenting that.

If what you want, is a way in F# to type your request on the client I think you would be better with something like Thoth.Fetch.

It gives you control over the generated JSON if needed, and also encourage you to handle errors using F# types.

Thanks for the replies and sorry for my late reply. :slight_smile:

I indeed get the Message “Services loaded.”. This message is logged to the console in the View function. But the services array is empty. It looks like I am getting a 200 from the getall endpoint but the services array is not deserialized correctly. I could be the issue with one side using fable.remoting and the other side is not.

image

Since I am new to this way and I’d like to have more control over the endpoints, how they are structured and so on. My question would be how I could use a regular httpclient to consume the endpoint. I’ll have a look into Thoth as well. Thanks for the suggestion. @MangelMaxime

@ntwilson
You are right and the screenshot is misleading. I did add
Cmd.None for testing. It normally looks like that.

eitherAsResult returns a result. This is working as expected.

You can’t use httpclient in the browser because this is something that exist only in .NET world.

When in the browser, you have to use JavaScript features and in this situation the native solution are XMLHttpRequest and fetch.

fetch is more modern and supports promise by default. In XMLHttpRequest, you are in callback world.

Thoth.Fetch is a wrapper on top of fetch which integration JSON deserialisation and error handling so you don’t have to handle low level code all the time.

You are probably hitting what I was telling you. Not having compatible JSON representation between Fable.Remoting and your endpoints.

Thanks Maxime

Then I think I should check out Thoth.Fetch to get the response and parse that myself. As I understand its the tool to use anyway if I want to access endpoints that I cannot control. Which would be the majority.
Thanks again for you awesome and immediate help.