Fable: Please add sample demonstrating use of Fetch API and toJson/ofJson for client/server shared types

Created on 5 Dec 2016  路  4Comments  路  Source: fable-compiler/Fable

To quote the man:

"Alfonso Garcia-Caro @alfonsogarciacaro 10:15
Hi @kevkov, you can use Fetch API (fable-powerpack) + toJson/ofJson (Fable.Core.JsInterop) on the client side, and Json.NET + Fable.JsonConverter (nuget package) on the client side."

"Alfonso Garcia-Caro @alfonsogarciacaro 10:22
@kevkov Can you please open an issue requesting the sample so I don't forget?"

This is the least I could do.

Most helpful comment

Here is a WIP sample showing shared types between the server and the client and using the fetch API.

Client Request

Server Response

_NOTE_ on the server it uses the jsonconverter library found here as a single file to work around it not targeting netcore at the moment

All 4 comments

I still need to implement the sample but Tomas Petricek already has a working Suave/Fable app: https://github.com/tpetricek/fable-tutorial/tree/master/3-drawing

Please note the sample uses the browser default JSON.parse/stringify though

Elmish has a react native sample - https://github.com/fable-compiler/fable-elmish/blob/master/samples/react-native/webrequest/src/App.fs#L33
It would work more or less the same way in any environment that supports the fetch api.
Edit: I should mention that the sample doesn't involve serialization, but imho that's orthogonal to the api.

Here is a WIP sample showing shared types between the server and the client and using the fetch API.

Client Request

Server Response

_NOTE_ on the server it uses the jsonconverter library found here as a single file to work around it not targeting netcore at the moment

The fable-suave-scaffold also uses the Json converter now with shared types :+1:

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tomcl picture tomcl  路  4Comments

nozzlegear picture nozzlegear  路  3Comments

theprash picture theprash  路  3Comments

alfonsogarciacaro picture alfonsogarciacaro  路  3Comments

MangelMaxime picture MangelMaxime  路  3Comments