I am using this.props.initialize(initData) to initialize the react form field values. inittdata contains the data in below format. I have also imported initialize from redux form. Below is the compilation error I am getting.
handleInitialize() {
const initData = {
"firstName": this.state.firstName,
"lastName": this.state.lastName
};
Error:
[ts] Property 'initialize' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'
Related
I am trying to implement react-redux in login-form input values.
I have added values to the redux state, but I cannot access the data individually from the state object.
Here are the details:
In App.js file
console.log(useSelector((state) => state));
gives result {email: "demo#demo.com" , password: "123456"}
. I am not able to access the email inside the state object using
console.log(useSelector((state) => state.email));
It is giving the error that
'email' does not exist on type 'DefaultRootState'. TS2339
Here is the reducer.js file
let formValues = {
email: "",
password: "",
};
export const inputReducer = (state = formValues, action) => {
switch (action.type) {
case "inputValue":
return { ...state, [action.name]: action.inputValue };
default:
return state;
}
};
Here is the action.txt file
export const handleChange = (name: string, inputValue: string) => {
return {
type: "inputValue",
name: name,
inputValue: inputValue,
};
}
I wrote a function to get rid of this problem :
function getProperty<T, K extends keyof T>(o: T, propertyName: K): T[K] {
return o[propertyName]; // o[propertyName] is of type T[K]
}
You have to pass your object as first parameter, then the name of your property (here it is email or password).
If you want to get all your property at once, you have to encapsulate them in an object property like this:
{ value : {email:"alan.turing#gmail.com",password:"123" } }
i may be late but thought to provide solution. Basically this type of error message appears when you don't provide the typing in the useSelector hook
As per the doc React-Redux which states:
Using configureStore should not need any additional typings. You will,
however, want to extract the RootState type and the Dispatch type so
that they can be referenced as needed.
here in your code block the RootState type is missing, this can be declared in your store file as below
import {createStore} from 'redux';
----------
const store = createStore(rootReducer);
export default store;
export type RootState = ReturnType<typeof store.getState>;
And in your .tsx or .jsx file where exactly you want to access your store values using react-redux hook useSelector add the type as below.
useSelector((state:RootState) => state)
i want to create a new graphql api and i have an issue that i am struggling to fix.
the code is open source and can be found at: https://github.com/glitr-io/glitr-api
i want to create a mutation to create a record with relations... it seems the record is created correctly with all the expected relations, (when checking directly into the database), but the value returned by the create<YourTableName> method, is missing all the relations.
... so so i get an error on the api because "Cannot return null for non-nullable field Meme.author.". i am unable to figure out what could be wrong in my code.
the resolver looks like the following:
...
const newMeme = await ctx.prisma.createMeme({
author: {
connect: { id: userId },
},
memeItems: {
create: memeItems.map(({
type,
meta,
value,
style,
tags = []
}) => ({
type,
meta,
value,
style,
tags: {
create: tags.map(({ name = '' }) => (
{
name
}
))
}
}))
},
tags: {
create: tags.map(({ name = '' }) => (
{
name
}
))
}
});
console.log('newMeme', newMeme);
...
that value of newMeme in the console.log here (which what is returned in this resolver) is:
newMeme {
id: 'ck351j0f9pqa90919f52fx67w',
createdAt: '2019-11-18T23:08:46.437Z',
updatedAt: '2019-11-18T23:08:46.437Z',
}
where those fields returned are the auto-generated fields. so i get an error for a following mutation because i tried to get the author:
mutation{
meme(
memeItems: [{
type: TEXT
meta: "test1-meta"
value: "test1-value"
style: "test1-style"
}, {
type: TEXT
meta: "test2-meta"
value: "test2-value"
style: "test2-style"
}]
) {
id,
author {
displayName
}
}
}
can anyone see what issue could be causing this?
(as previously mentioned... the record is created successfully with all relationships as expected when checking directly into the database).
As described in the prisma docs the promise of the Prisma client functions to write data, e.g for the createMeme function, only returns the scalar fields of the object:
When creating new records in the database, the create-method takes one input object which wraps all the scalar fields of the record to be
created. It also provides a way to create relational data for the
model, this can be supplied using nested object writes.
Each method call returns a Promise for an object that contains all the
scalar fields of the model that was just created.
See: https://www.prisma.io/docs/prisma-client/basic-data-access/writing-data-JAVASCRIPT-rsc6/#creating-records
To also return the relations of the object you need to read the object again using an info fragment or the fluent api, see: https://www.prisma.io/docs/prisma-client/basic-data-access/reading-data-JAVASCRIPT-rsc2/#relations
I am trying to use apollo client watch method in angular to query spring boot server. I am not able to pass arguments with this method.
Since "aid" is mandatory, when it is trying to make a call I getting error like
ERROR Error: GraphQL error: Variable 'aid' has coerced Null value for NonNull type 'String!'
Below is my code in typescript.
export class AgreementGQL extends Query {
document = gql`query agreement($aid: String!) {
agreement(id: $aid) {
id
name
}
}
Below is calling code to the agreement. Where agreement is injected in constructor.
this.agreement.watch({
aid: "1234567"
}).valueChanges.subscribe(result => {
console.log("*********** result : " + JSON.stringify(result.data));
});
I tried using "variables" as well, but no luck.
this.agreement.watch({ variables:{
aid: "1234567"
}}).valueChanges.subscribe(result => {
console.log("*********** result : " + JSON.stringify(result.data));
});
You just need to set the value as a key/value pair like:
const myVal = '123';
Then pass that as an object into the watch method...
const agreement = this.agreementQuery
.watch({ myVal })
.valueChanges.pipe(pluck('data'));
Then Subscribe to get the data out:
agreement.subscribe(data => console.log(data));
This approach worked for me.
I have below piece of code which I am using to call http request using iron ajax with polymer so passing the value of body and last-response using polymer properties.as we can see here we have requestBody polymer property in this we are returning no of values in requestBody all values are hardcoded like start and end and name under tag.
<px-vis-timeseries
width="1000"
height="250"
margin='{"top":30,"bottom":60,"left":65,"right":65}'
register-config='{"type":"vertical","width":200}'
selection-type="xy"
chart-data="{{ltuchartData}}"
series-config="[[LTUseriesConfig]]"
chart-extents='{"x":["dynamic",1619712],"y":[0,100]}'
event-data='[{"id":"333","time":15697128,"label":"test"}]'
x-axis-config='{"title":"Time"}'
y-axis-config='{"axis1":
{"title":"Remaining","titleTruncation":false,"unit":"%"}}'>
</px-vis-timeseries>
<iron-ajax
id="Request"
method="POST"
content-type="application/json"
auto
url="/api/series/v1/points"
last-response="{{Data123}}"
body="{{requestBody}}">
</iron-ajax>
Polymer({
is: 'test-view',
behaviors: [GlobalsBehaviour],
properties: {
uri: {
type: String,
observer: '_uriChanged'
},
requestBody:{
type: Object,
value: function() {
return {
"start": 11111,
"end": 123333,
"tags": [
{
"name" : "/asset/India/rotor",
}
]
};
}
},
Data123:{
type: Object,
observer: '_formateData'
},
observers: [
'_uriChanged(globals.uri)'
],
_uriChanged: function(uri) {
this.set('requestBody.tags.0.name', uri);
this.$.Request.generateRequest();
}
Now Below are the queries with respect to above code .
I want to set end attribute value (which is defined in requestBody property value )dynamically based on the uri for that I tried like : this.set('requestBody.end', "1113444"); in _uriChanged, But it didn't work.
I want to pass this end attribute value dynamically in above px-vis-timeseries polymer component's property that is:
chart-extents='{"x":["dynamic",1619712],"y":[0,100]}'
event-data='[{"id":"333","time":15697128,"label":"test"}]'
in above properties I want to pass end attribute value like :
in chart-extents at the place of "1619712" I want to pass "end" + 2*50000
in event-data at the place of "15697128" I want to pass "end" + 50000
for that also i tried like this chart-extents = '{"x":["dynamic" , {{requestBody.end}}] , ,"y":[0,100]}'
now I have set end attribute value in requestBody computed function that is (_getRequestBody) based on my requirement .Now my problem is I want to get this end attribute value in my another computed functio(n of _chartExtents that is (_getChartExtents) I want pass this end attirbute value (which we will get from request body ) to xDynamic (which is the attribute of chartExtents)
As I wanted to pass uri value in name attribute which is defined in requestBody property for that I am setting like
this.set('requestBody.tags.0.name', uri); in _urichanged callback which is working fine now my problem is while defining or declaring polymer property named as requestBody i dont want to pass any hardcoded value in name attribute for that i tried "name": "" and "name" : this.uri,and "name" : uri ,but not able to get value.
Note: uri is coming from another polymer component and in some case its coming from global set variable.
How can I declare name attribute value without passing any hardcoded value?
I want to set end attribute value (which is defined in requestBody property value )dynamically ...
Not a satisfactory answer, but it should work as Polymer does dirty checking. Polymer have sometimes trouble updating properties, but not in this case, so try to override dirty checking by nullifying the element first.
_uriChanged: function(uri) {
if (this.requestBody.start) {
var clonedObj = JSON.parse(JSON.stringify(this.requestBody);
clonedObj.tags.0.name = uri;
this.set('requestBody', {});
this.set('requestBody', clonedObj);
this.$.Request.generateRequest();
}
Again, this shouldn't be needed. I would most of all make requestBody a computed value instead of setting specific values,
properties: {
requestBody:{
type: Object,
computed: '_getRequestBody(uri)'
},
// Other properties, like uri
}
// Other javascript methods
_getRequestBody: function(uri) {
var defaultURI = 123333; // I would make this a property or add a default value to 'uri'
uri = (uri) ? uri : defaultURI;
return {
"start": 11111,
"end": uri, // Here's the change
"tags": [
{
"name" : "/asset/India/rotor",
}
]
};
},
Note that computed will run no matter if the properties (uri, in this case) are defined or not. Sometimes, the order of the properties are important when using event handlers (observers) so place those last in properties.
i want to pass this end attribute value dynamically...
chart-extents='{"x":["dynamic",1619712],"y":[0,100]}'
You shouldn't pass variables like that but instead use something like chart-extents='[[myObject]]'; However, for this specific solution one of the keys depends on another variable (the object requestBody in this case).
chart-extents="[[_getChartExtents(requestBody.end)]]"
---
// Other javascript methods
_getChartExtents: function(xDynamics) {
return {"x":["dynamic",xDynamics],"y":[0,100]};
},
The _ before the method name is just a programming habit of mine, so I can see that the methods and properties aren't used by other elements.
as i wanted to pass uri value in name attribute which is defined in requestBody property for that i am setting like this.set('requestBody.tags.0.name', uri);
Just extend answer 1.
_getRequestBody: function(uri) {
var defaultURI = 123333; // I would make this a property or add a default value to 'uri'
uri = (uri) ? uri : defaultURI;
return {
"start": 11111,
"end": uri,
"tags": [
{
"name" : uri, // Here's the change
}
]
};
},
Here is my problem :
I want to use the power of simple-schema to be able to check my inserts against the following schema :
let UprocSchema = new SimpleSchema({
"name": { type : String, label: "Nom Uproc" },
"label": { type : String, label: "Libellé Uproc" },
"status": { type : String, label: "Status UPR" }
});
For some reason I ignore, even if the SimpleSchema seems to be well instanciated, I cannot use the attachSchema property on Mongo.Collection.
Here is my code :
let repo_collection = new Mongo.Collection('repository');
export const Repository = new MongoObservable.Collection<Uproc>('repo_collection');
repo_collection.attachSchema( UprocSchema );
Here is my error messages :
Property 'attachSchema' does not exist on type 'Collection<{}>'.
TypeError: repo_collection.attachSchema is not a function
attachSchema is part of [collection2][1] package.
Documentation states:
Create one or more SimpleSchema instances and then use them to
validate objects. By adding the aldeed:collection2 package to your
app, you can attach them to collections to get automatic validation of
your insert and update operations.