I am quite new to relay , My idea is to make a 3rd party API call , which returns a JSON object. for example you can consider this URL as an API call which returns a simple JSON. "http://ip.jsontest.com/". How Do I go about with the react Relay design
It depends..
From server?
Just write a graphQL schema as usual but instead of a database request, make an 3rd party API call and use schema resolvers if data structure requires it. You might want to add a caching layer if data isn't extremely dynamic because 3rd party API calls might be slow (not a rule of thumb).
Now you can get the data via Relay Containers as usual. Relay also handles client-side caching!
From client?
There really isn't Relay design for that because Relay is currently only a glue between graphQL and React. It might change with v2. Do as you wish, for example, use a regular function or React method:
getMyData() {
// ajax call or fetch()
}
Downside to this is that if you need to reuse that data, client-side caching is your job. Use either Flux / Redux, store it in global variable (not a good practice) or in storages (indexedDB, localStorage etc).
Related
How can I POST and DELETE requests using ReactJS?
My REST application is built in ASP.Net and Core 1.0.1 (API handling data).
React was designed for MVC Views, and as such is AJAX/data agnostic.
I recommend a library made for simplifying ajax requests, like axios or fetch.js
https://github.github.io/fetch/
Flux might also interest you, as it's an architecture by facebook for implementing data in your frontend:
https://facebook.github.io/flux/
You could use a promise based library like 'axios' to make async requests and chain the state change inside the promise then method
Learning a little React currently. I'm finding myself confused about some of the utility here. One sticking point that seems to (for me, at least) undermine it's value is that If I want to sync my UI to data residing on the server (which can and will change), I need to manually poll the server? Aside from component-based architecture, I'm not sure how this is getting me further than well structured and logically implemented AJAX. Even in the React docs, they're using JQuery in this regard. https://facebook.github.io/react/docs/tutorial.html#updating-state
I'm sure I'm missing the forest for the trees or whatever.
Thanks!
React is (citing their page)
a javascript library for building user interfaces
The main focus is to build a view layer for your application. This means you have full freedom in choosing what to use to fetch your data. For simple uses it can be jQuery or fetch.
It's generally recommended to not fetch data directly in your components and use one of Flux pattern implementations, e.g. Redux.
If your application has to be constantly powered by new data from server you can think about using something like RethinkDB on your backend and connect it to Flux store on your frontend.
I'm developing a react native application using flux which has a number of components and a number of stores. The application uses a javascript SDK which authenticates once against an online rest API. The SDK object returned is then authenticated for any future calls.
I can either call the rest API from actions or stores. How do I share that authenticated SDK object against a number of stores or actions? And which of the two places are best to call the API?
Use a Singleton.
If you are packing your modules with Browserify or Webpack, it should be simple to make a module exports object which encapsulates the SDK interface.
The Singleton approach is how it should be but it also should have some architectural pattern :). In fact the logic for creating API call, authenticating etc. should be neither in action itself, nor in the store.
In the flux architecture the guys from Facebook introduced also some "helper utilities" called Action creators - those are responsible for creating the right action and passing it to the dispatcher (they might need to have some web api call behind to get the action). A very nice explanation of this part of Flux is available here - including visual explanation:
http://facebook.github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html
So - all in all - have an ActionCreator singleton to prepare the actions for you and use it in your views in the place where you want to send action to the dispatcher.
Basically I'm writing an app and am using Sails, MongoDB and Node JS for the back end. I'll use Sail's API features and was wondering what would be the best way to make the app realtime.
For instance I could use AJAX to call the API and manipulate the DOM using jQuery and update the DB through $.post then let the model update the db in the backend, however I'm finding this approach quite cumbersome. Not to mention I can see the code could become quite difficult to maintain after a while.
I've been doing some research and - if I understood correctly - it seems I could use either Backbone, Angular or Knockout to manipulate the data/DOM on the front end, however I'm not sure what would be the best approach in my case nor whether any of these would indeed suit my needs:
Being able to get the data dynamically
Update the data and the DOM dynamically as the user interact with the page
Post the updated data dynamically with none or as minimal data transformation on the back end as possible
All the above asynchronously
As I don't want this to become a heated debate on which library is best, so I would like to know only whether any of the aforementioned libraries can do what I need and which is the leanest/simplest/has the lighter learning curve.
I did similar research a while ago and when found AngularJS, just stopped looking any further.
Right to your questions:
Being able to get the data dynamically
It is pure pleasure to do it in Angular. For the very basic functionality you have got $http service which allows you to send http request and register a callback when the data arrives.
For more complicated things there are modules ngResource and Restangular (external).
Update the data and the DOM dynamically as the user interact with the page
For manipulating DOM, Angular introduced concept of directive. It is basically future of the web (Shodow DOM and Web Components) right now. At this time point, there is nothing more elegant out there.
Post the updated data dynamically with none or as minimal data transformation on the back end as possible
Yes. JSON.
All the above asynchronously.
Yes, of course.
SailsJS provides interchangeability of HTTP or socket.io connections. In your case I think sockets would be a better fit than AJAX.
I would like to know what is the proper way to get data from backend when I want to use angularJs (or similar) in my web app?
The only way I see is to render html (static html with js scripts - e.g. angularjs) with no data from backend and then download data via ajax requests from my backend API. But I think this solution is not good because of many HTTP requests:
For example I have blog website, I want to show a post, comments, and the related posts on the sidebar. So probably I need to make at least 3 HTTP requests to get the data unless I will prepare API to get all I need in one request.
I can also imagine websites that could have much more HTTP requests. Is it a proper way to do this? Doesn't it overload a server? Or my way of thinking is so wrong?
It is either websockets or HTTP requests. Preparing API to get all in one request is one option. Another two options are XMLHttpRequest/iframe streaming which is a method of a technique known as Comet.
I would go with websockets since it is supposed to solve the problem that was previously solved with weird applications like iframe streaming. There are libraries that properly handles fallbacks if the browser does not support websockets:
web-socket-js ( this needs a websocket server )
Socket.IO ( this has a node.js module and also implements a kind of unnecessary protocol on top of websocket protocol )
If you choose the old methods there will be many problems waiting for you on the road like XmlHttpRequest.responseText while loading (readyState==3) in Chrome
I think you have to distinguish two cases:
You render the page for the first time.
You update parts of your page when something changes
Of course in the second case it makes sense to fetch only parts of the page via individual HTTP requests. However, in the first case you can simply serialize your complete model as one JSON object and embed it in the page like this:
<script type="text/javascript">
var myCompleteModel = { /* Here goes your model */ };
<script>
The controllers of the components on your page can then access this global variable to extract the parts being relevant for them. You can also wrap access to the initial model in a service to avoid accessing a global variable in all your controllers.