what is preferred way to pass data dictionaries using relay,
for example I have in interface
UsersList = [
{
userName
// each user has select control
CountrySelectControl {
value = Country
options = [All Countries List]
}
]
What is the right way to read All Countries List?
As I understand it's not a good idea to query graphQl like this
{ users { userName, country, countriesList } }
So the only way I see I need to query countriesList at root, and pass it via props manually to every children component?
class Blabla extends Relay.Route {
static queries = {
users: (Component) => Relay.QL`
query UsersQuery {
users { ${Component.getFragment('user')} },
}
`,
countriesList: (Component) => Relay.QL`
query countriesListQuery {
countriesList { ${Component.getFragment('countriesList')} },
}
`,
...
}
And if i have a lot of dictionaries and some more deep UI structure this becomes a pain.
Or I can somehow to pass root data deeper in the tree without explicitly write this data in props. (I mean without context)
Yes, you can pass root data deeper in tree without explicitly writing countryList as props.
Suppose, we have data of a continent and the countries that belongs to it. We have nested UI components. For example, ContinentComponent includes a CountryListComponent, which needs a list of countries. A CountryListComponent consists of a number of CountryComponent, which needs a list of states. Instead of having ContinentComponent pass country list and state list all the way down to CountryListComponent and CountryComponent, we can utilize high-level prop.
We can specify the high-level prop continent in the high-level component ContinentComponent as follows:
export default Relay.createContainer(ContinentComponent, {
fragments: {
continent: () => Relay.QL`
fragment on Continent {
${CountryListComponent.getFragment('continent')},
}
`,
},
});
Instead of country list prop, only the prop continent is passed to CountryListComponent from the ContinentComponent.
Next, we specify the necessary props in the CountryListComponent:
export default Relay.createContainer(CountryListComponent, {
fragments: {
continent: () => Relay.QL`
fragment on Continent {
countryList(first: 100) {
edges {
node {
id,
name,
},
${CountryComponent.getFragment('country')},
},
},
}
`,
},
});
Now, CountryListComponent passes a specific prop value this.props.continent.countryList.edges[index].node to CountryComponent.
This use case is one of the primary motivations of Relay.js.
Related
I'm using Relay Modern (compat). I have a fragment that contains a field that has one argument, but I can't find a way of passing the variable value from the parent component:
// MyFragmentComponent.jsx
class MyFragmentComponent extends Component {...}
const fragments = {
employee: graphql`
fragment MyFragmentComponent_employee on Employee {
hoursWorked(includeOvertime: $includeOvertime)
dob
fullName
id
}
`,
}
export default Relay.createFragmentContainer(MyFragmentComponent, fragments)
It will end up saying $includeOvertime is not defined. The context where this component is being rendered looks like this:
// MyRootComponent.jsx
class MyRootComponent extends Component {
render() {
const { employee } = this.props
const includeOvertime = //... value is available here
return (
<div>
<MyFragmentComponent employee={employee} />
</div>
)
}
}
const query = graphql`
query MyRootComponentQuery($employeeId: String!) {
employee(id: $employeeId) {
fullName
...MyFragmentComponent_employee
}
}
`
export default MyUtils.createQueryRenderer(MyRootComponent, query) // this just returns a QueryRenderer
With relay classic you would pass variables this way:
....
employee(id: $employeeId) {
fullName
${MyFragmentComponent.getFragment('employee', variables)}
}
How can I achieve the same with relay modern?
Using #argumentDefinitions and #arguments directives seems to be the way to go. In relay versions before 1.4.0 graphql.experimental had to be used instead of graphql.
In the fragment definition:
const fragments = {
employee: graphql`
fragment MyFragmentComponent_employee on Employee
#argumentDefinitions(includeOvertime: { type: "Boolean", defaultValue: false }) {
hoursWorked(includeOvertime: $includeOvertime)
dob
fullName
id
}
`,
}
If you want the argument to be required:
#argumentDefinitions(includeOvertime: { type: "Boolean!" })
In the parent component you should specify the arguments for the fragment like this:
const query = graphql`
query MyRootComponentQuery($employeeId: String!, $includeOvertime: Boolean) {
employee(id: $employeeId) {
fullName
...MyFragmentComponent_employee #arguments(includeOvertime: $includeOvertime)
}
}
`
In this page in the official relay docs there is an example of directives for defining/passing arguments.
UPDATE:
Since relay version 1.4.0 graphql.experimental was deprecated and now all the features are supported by the regular graphql tag.
UPDATE:
In relay version 1.5.0 graphql.experimental was removed.
Playing with Relay I got problems with accessing data. I was trying to reproduce the issues with official Todo example of the Relay project. Please consider gist in order to change Todo example.
here
Here are the questions:
Why Summary component cant get access to sibling (viewer) component data?
What the reason for "queries must have exactly one field"? GraphQL doesn't have such limitations I believe.
Why I got Invariant Violation: Relay(TodoApp).getFragment(): summary is not a valid fragment name ?
Thanks in advance!
Whatever data Summary wants to use from viewer has to be delclared as GraphQL in the Summary container, and composed all the way down to the root of the application.
class Summary extends React.Component {
render() {
return <span>{this.props.viewer.bar}</span>;
}
}
export default Relay.createContainer(Summary, {
fragments: {
viewer: () => Relay.QL`
fragment on Viewer {
bar
}
`,
},
});
class TodoApp extends React.Component {
render() {
return <Summary viewer={this.props.viewer} />;
}
}
export default Relay.createContainer(TodoApp, {
fragments: {
viewer: () => Relay.QL`
fragment on Viewer {
foo
${Summary.getFragment('viewer')}
}
`,
},
});
Note that the foo field will not be available inside Summary. We mask it out since Summary didn't ask for it.
You can have multiple queries in a Relay.Route, but only one root field per query. We need this one-to-one correspondence so that we know which result to assign to which prop.
class MyRoute extends Relay.Route {
queries: {
summary: () => Relay.QL`query { summary }`,
viewer: () => Relay.QL`query { viewer }`,
},
/* ... */
}
You need to compose the summary fragment all the way down to the root of the application, making it available on TodoApp.
export default Relay.createContainer(TodoApp, {
fragments: {
summary: () => Relay.QL`
fragment on Summary {
${Summary.getFragment('summary')}
}
`,
},
});
In Grails - I need to make a controller method that will populate State and County dropdown form fields so that when a State is selected it will fill only that State's counties into the County dropdown.
A colleague told me that's an asynchronous call in Grails, but I'm a novice in Grails and I really don't know what that is or how to start one. Any help would be greatly appreciated.
Here's my code snippets:
using Grails 2.43 currently. I have two domain classes (State and County), and two Select dropdowns for State and County.
Form elements:
<g:select name="locationState" class="form-control" from="${....State.list().sort{it.orderNumber}}">
<g:select name="locationCounty" class="form-control" from="${...State.FindByName(it.orderNumber).counties}">
Here are the example classes:
class State {
static hasMany = [county:County]
String name
String value
int orderNumber = 0
static constraints = {
name nullable:false, maxSize:50, blank:false
value nullable:false, maxSize:100, blank:false
}
String toString(){
"$value"
}
static mapping = {
table 'state'
cache: 'read-write'
columns{
id column:'id'
name column:'name'
value column:'value'
orderNumber column:'order_number'
}
id generator: 'assigned'
}
}
class County {
State state
String county
static constraints = {
state nullable:false
county nullable:false, maxSize:100, blank:false
}
String toString(){
"${state.name} - $county"
}
static mapping = {
table 'county'
cache: 'read-write'
columns{
id column:'id'
county column:'county'
state column:'state_id'
}
id generator: 'assigned'
}
}
The async guide linked in the comments is for make programatic, asynchronous calls. For example, if you had two computationally expensive method calls (or ones that would require network I/O) you can use threads to run them (roughly) in parallel. Grails provides many different helpers to make this kind of asynchronous programming very easy.
However, this is not likely something you need for your GORM queries. You want to populate a second select box. You could accomplish this two ways, by reloading the page after the state is selected, or by using JavaScript to populate the box. I am assuming you want to do the latter. Grails does provide tools (such as the <g:remoteFunction /> tag) to handle this without writing your own JavaScript but the Grails AJAX library has since been deprecated and its use is not recommended.
Instead, you should just write your own JavaScript. I'll show you a technique using jQuery:
In your view, initialize both selects, but the second should be initialized as empty. We are also going to give them IDs to make them easier to select from jQuery:
<g:select name="locationState"
class="form-control"
from="${....State.list().sort{it.orderNumber}}"
id="location-state" />
<g:select name="locationCounty"
class="form-control"
from="${[]}"
id="location-county" />
Then, we will need to expose an action on the controller to load the counties when the user selects a state:
def loadCountiesByState() {
def state = params.state
def counties = State.findByValue(state).counties
render g.select(name: 'locationCounty', class: 'form-control',
from: counties, id: 'location-county')
}
You should be able to test this part just by pointing your browser to /app-name/controller-name/loadCountiesByState?state=CA. I don't know exactly how your data is modeled so you might need to alter the State.findByValue(state) part to fit your needs.
Now we just need to wire up the control with some JavaScript. Make sure you have jQuery included.
<script type="text/javascript">
$(function() {
$('#location-sate').change(function() {
var state = $(this).val();
$.ajax({
url: '/app-name/controller-name/loadCountiesByState',
date: { state: state },
success: function(data) {
$('#location-county').replaceWith(data);
}
});
});
});
</script>
This will replace the dropdown with a new select that should be fully populated with the counties.
I am using a WebApi controller to return an IDictionary to jQuery autocomplete like so:
public IDictionary<int, string> GetClientAuto(string term)
{
var clients = db.Clients.Where(n => n.Name.Contains(term)).OrderBy(n => n.Name);
return clients.ToDictionary(n => n.ClientID, n => n.Name);
}
The issue is although I add a breakpoint and check the variable clients is sorting by Name turns to to be true, the order shown in the autocomplete box is different, possibly I expect by the ID. I tried adding this to the autocomplete: sortResults:false, but with no effect.
I have this in my succes function, is there something here maybe I need to change for the order to work on the label i.e. Name:
success: function (json) {
// call autocomplete callback method with results
response($.map(json, function (name, val) {
return {
label: name,
value: val
}
}));
},
Its being sorted by the ToDictionary call, the order of dictionaries isn't actually defined (http://msdn.microsoft.com/en-us/library/yt2fy5zk.aspx) as it shouldn't matter, however i believe it is typically the value of the key, not the value.
You could resort it in javascript to be by name, or you could return something other than a dictionary from your api. Either a IEnumerable> or IEnumerable would do the trick.
Alterntively look into the OrderBy methods on the dictionary, however they all appear to return a list of KeyValuePairs.
End result should look something like
public IEnumerable<KeyValuePair<int, string>> GetClientAuto(string term)
{
return db.Clients.Where(n => n.Name.Contains(term)).OrderBy(n => n.Name).Select(n => new KeyValuePair<int, string>(n.ClientID, n.Name ));
}
success: function (json)
{
response($.map(json, function (item) {
return {
label: item.Value,
value: item.Key
}
}));
},
Is there a way to map from/to a POCO and knockoutjs observable?
I have a Note class:
public class Note
{
public int ID { get; set; }
public string Date { get; set; }
public string Content { get; set; }
public string Category { get; set; }
public string Background { get; set; }
public string Color { get; set; }
}
and this is my javascript:
$(function () {
ko.applyBindings(new viewModel());
});
function note(date, content, category, color, background) {
this.date = date;
this.content = content;
this.category = category;
this.color = color;
this.background = background;
}
function viewModel () {
this.notes = ko.observableArray([]);
this.newNoteContent = ko.observable();
this.save = function (note) {
$.ajax({
url: '#Url.Action("AddNote")',
data: ko.toJSON({ nota: note }),
type: "post",
contentType: "json",
success: function(result) { }
});
}
var self = this;
$.ajax({
url: '#Url.Action("GetNotes")',
type: "get",
contentType: "json",
async: false,
success: function (data) {
var mappedNotes = $.map(data, function (item) {
return new note(item.Date, item.Content, item.Category, item.Color, item.Background);
});
self.notes(mappedNotes);
}
});
}
Ignore the fact that the save function is not used (to simplify the code here).
So, when I load the page I call the server and I retrieve a list of Note objects and I map it in javascript. Notice how ID is not mapped because I dont need it in my view.
So far so good, I see the notes on screen, but how I can save the notes back to the server?
I tried to convert the note (Im saving just the new note and not the entire collection) to JSON and send it to my controller but I don't know how to access to the note in the controller. I tried:
public string AddNote(string date, string content, string category, string background, string color)
{
// TODO
}
but is not working. I want to have something like:
public string AddNote(Note note) {}
(Btw, what's the best return for a method that just save data on DB? void?)
So, How I do this? I tried knockout.mapping plugin but it is quite confusing and I don't get it working for me.
Thank you.
ASP.NET MVC's model binder will look for properties that are case-sensitive. You need to pass your JSON object back to the server with the property names matching your poco object.
I usually do 1 of 2 things:
Make my javascript object property names capital (that way in JS, I know that this object will at some point be a DTO for the server)
function Note(date, content, category, color, background) {
this.Date = date;
this.Content = content;
this.Category = category;
this.Color = color;
this.Background = background;
};
In my AJAX call i will just create an anonymous object to pass back to the server (note this does not require ko.toJSON):
$.ajax({
url: '#Url.Action("AddNote")',
data: JSON.stringify({ note: {
Date: note.date,
Content: note.content,
Category: note.category,
Color: note.color,
Background: note.background
}
}),
type: "post",
contentType: "application/json; charset=utf-8",
success: function(result) { }
});
(note the different contentType parameter as well)
You will want to make your ActionMethod take in a (Note note) and not just the array of parameters.
Also, because the modelbinders look through the posted values in a couple different ways. I've had luck posting JSON objects with out specifying the ActionMethod parameter name:
instead of:
{ note: {
Date: note.date,
Content: note.content,
Category: note.category,
Color: note.color,
Background: note.background
}
}
just do:
{
Date: note.date,
Content: note.content,
Category: note.category,
Color: note.color,
Background: note.background
}
(but this can get dicey with arrays binding to collections and complex types...etc)
As far as the 'Best' signature for a return on a method that does a db call, we generally prefer to see boolean, but that also depends on your needs. Obviously if it is trivial data, void will be fine, but if its a bit more critical, you may want to relay a boolean (at the least) to let your client know it might need to retry (especially if there's a concurrency exception).
If you really need to let your client know what happened in the database, you can foray into the world of custom error handling and exception catching.
Also, if you need to display very specific information back to your user depending upon a successful/unsuccessful database commit, then you could look at creating custom ActionResults that redirect to certain views based upon what happened in the database transaction.
Lastly, as far as getting data back from the server and using Knockout...
again the mapping plugin will work if your property names are the same case or you create a slightly more explicit mapping
My own trick with my JS objects is below. The initialize function is something i created that should be reusable across all your objects as it just says "if the property names match (after being lowercased), either set them by calling the function (knockout compatible) or just assign the value.:
function Note(values){ //values are what just came back from the server
this.date;
this.content;
this.category;
this.color;
this.background;
initialize(values); //call the prototyped function at the bottom of the constructor
};
Note.prototype.initialize = function(values){
var entity = this; //so we don't get confused
var prop = '';
if (values) {
for (prop in values) {
if (values.hasOwnProperty(prop.toLowerCase()) && entity.hasOwnProperty(prop.toLowerCase())) {
//the setter should have the same name as the property on the values object
if (typeof (entity[prop]) === 'function') {
entity[prop](values[prop]); // we are assuming that the setter only takes one param like a Knockout observable()
} else {// if its not a function, then we will just set the value and overwrite whatever it was previously
entity[prop] = values[prop];
}
}
}
}
};