const [lastViewId, setLastViewId] = useState<string>("");
const { data, loading, error } = useQuery(
GET_USER,
variables: { id: user_id }
);
const lastViewData = useQuery(
GET_LAST_VIEW_DATA,
variables: { id: lastViewId }
);
useEffect(() => {
if (loading || !data) return;
if (data && data.user && data.user.lastViewId) {
setLastViewId(data.user.lastViewId)
}
}, [loading]);
As you can see, GET_LAST_VIEW_DATA is called with no lastViewId before lastViewId is set.
But I'd like to GET_LAST_VIEW_DATA is called after lastViewId is set.
How can I protect the first call?
useLazyQuery is the best solution for this issue.
import {useLazyQuery} from '#apollo/react-hooks';
...
const [getLastViewData, { called, loading, data }] = useLazyQuery(
GET_LAST_VIEW_DATA,
{ variables: { id: lastViewId } }
);
...
You can call getLastViewData whenever you want.
Related
Can't get errors from resolver using react-hook-form custom resolvers. Trying to validate some fields dynamically. But if I submit form I can get errors fields
export const customResolver = (parameters) => {
return (values, _context, { fields, names }) => {
const transformedParameters = transformParameters(parameters);
const paramsIds = getParamsIds(transformedParameters);
const { name, value } = Object.values(fields)[0];
let errors = {};
if (names && names[0].length <= 3) {
// Validate single field
const textRequired = transformedParameters
.find(({ id }) => id === name)
.values.find(({ name: valueName }) => value === valueName).textRequired;
if (textRequired && !values[`${names} commentary`]) {
errors = {
[`${names} commentary`]: {
type: "required",
message: "Поле необходимо заполнить!",
},
};
}
} else {
// Validate onSubmit method
errors = Object.entries(values).reduce((acc, [id, fieldValue]) => {
if (paramsIds.includes(id) && !fieldValue) {
return {
...acc,
[id]: { type: "required", message: "Поле необходимо заполнить!" },
};
}
return acc;
}, {});
}
return { values, errors };
};
};
What did I do wrong?
I do see a sucessfull API request
const data = useLazyLoadQuery<brandQuery>(
graphql`query
brandQuery {
...brand_autoBrands
}
`,
{
first: 10,
},
{
fetchPolicy: "network-only",
}
);
console.log(data);
But I got following output. it is supposed to be a json object returned from my API.
brand_autoBrands fragment somewhere
const autoBrands = graphql`
fragment brand_autoBrands on AdminQuery
#argumentDefinitions(
first: { type: "Int", defaultValue: 10 }
after: { type: "String", defaultValue: "" }
last: { type: "Int" }
before: { type: "String" }
filters: { type: "[Filter]" }
sorters: { type: "[Sorter]"}
)
#refetchable(queryName: "BrandListPaginationQuery") {
autoBrands(first: $first, after: $after, last: $last, before: $before, filters: $filters, sorters: $sorters)
#connection(key: "BrandList_autoBrands") {
edges {
node {
...brandFragment
}
}
pageInfo {
startCursor
}
totalCount
}
}
`;
const {
data,
loadNext,
hasNext
} = usePaginationFragment<BrandListPaginationQuery, _>(
autoBrands,
props.autoBrands,
);
You can't log a fragment data object in the parent. That data belongs to the component that defined a fragment. For performance, relay needs to know that this data is fetched for a child component but the parent doesn't need to know what the actual data object is. You just need to pass the data to its component then you should be able to log it in the child component.
const data = useLazyLoadQuery<brandQuery>(
graphql`query
brandQuery {
...brand_autoBrands
}
`,
{
first: 10,
},
{
fetchPolicy: "network-only",
}
);
data && <Brand autoBrands={data} />
In my project I use ng2-charts. All works fine and chart is shown as expected (data, labels, chart's colors), but when data is changed then color of chart become grey by default. May someone help to correct problem with chart's color?
Here is my code:
import { ChartDataSets } from 'chart.js';
import { Color, Label } from 'ng2-charts';
...
export class JuridicalBidPrimaryComponent extends BidComponent {
lineChartData: ChartDataSets[];
lineChartLabels: Label[];
lineChartLegend = true;
lineChartType = 'line';
lineChartColors: Color[] = [
{
backgroundColor: 'rgba(148,159,177,0.2)',
borderColor: 'rgba(148,159,177,1)'
},
{
backgroundColor: 'rgba(77,83,96,0.2)',
borderColor: 'rgba(77,83,96,1)'
}];
options: any = {
legend: { position: 'bottom' }
}
constructor(
...//inject services
) {
super();
this.initData();
};
initData(): void {
this.lineChartData = [];
this.lineChartLabels = [];
if (this.cabinetId)
this.getData(this.year);
}
getData(year: number) {
this.isLoading = true;
var limitPromise = this.juridicalLimitService.getPrimary(this.cabinetId, year).catch(error => {
this.notificationService.error(error);
return Observable.throw(error);
});
var analyticsPromise = this.juridicalAnalyticsService.getUsedEnergy(this.cabinetId, year).catch(error => {
this.notificationService.error(error);
return Observable.throw(error);
});
forkJoin([limitPromise, analyticsPromise]).subscribe(data => {
this.limits = data[0];
this.lineChartLabels = data[1].map(e => e.Period);
this.lineChartData.push(
{
data: data[1].map(e => e.Limit),
label: 'Bid'
},
{
data: data[1].map(e => e.Used),
label: 'Used'
}
);
this.isLoading = false;
}, error => {
this.isLoading = false;
});
}
}
export abstract class BidComponent {
cabinetId: number;
isLoading: boolean = false;
#Input("periods") periods: BaseDictionary[];
#Input("cabinetId") set CabinetId(cabinetId: number) {
this.cabinetId = cabinetId;
this.initData();
}
abstract initData(): void;
}
As you can see this component is partial and I use setter to listen of cabinetId changes.
Here is html part:
...
<canvas baseChart width="400" height="150"
[options]="options"
[datasets]="lineChartData"
[labels]="lineChartLabels"
[legend]="lineChartLegend"
[chartType]="lineChartType"
[colors]="lineChartColors"></canvas>
...
And I use this component as:
<app-juridical-bid-primary [cabinetId]="cabinetId"></app-juridical-bid-primary>
I find similar question similar question, but, unfortunately, don't understand answer
After some hours of code testing I find answer. It is needed to correct code from question:
...
import * as _ from 'lodash'; //-- useful library
export class JuridicalBidPrimaryComponent extends BidComponent {
lineChartData: ChartDataSets[] = [];
lineChartLabels: Label[] = [];
...
initData(): void {
/*this.lineChartData = [];
this.lineChartLabels = [];*/ //-- this lines is needed to remove
if (this.cabinetId)
this.getData(this.year);
}
getData(year: number) {
...
forkJoin([limitPromise, analyticsPromise]).subscribe(data => {
this.limits = data[0];
this.lineChartLabels.length = 0;
this.lineChartLabels.push(...data[1].map(e => e.Period));
if (_.isEmpty(this.lineChartData)) {
//-- If data array is empty, then we add data series
this.lineChartData.push(
{
data: data[1].map(e => e.Limit),
label: 'Замовлені величини'
},
{
data: data[1].map(e => e.Used),
label: 'Використано'
}
);
} else {
//-- If we have already added data series then we only change data in data series
this.lineChartData[0].data = data[1].map(e => e.Limit);
this.lineChartData[1].data = data[1].map(e => e.Used);
}
this.isLoading = false;
}, error => {
this.isLoading = false;
});
}
}
As I understand ng2-charts, if we clean dataset (lineChartData) and add new data then the library understand this as create new series and don't use primary settings for the ones. So we have to use previous created series.
I hope it will be useful for anyone who will have such problem as I have.
I have a page where a bunch of file ids get loaded from localStorage, then when the component mounts / receives new props, it calls setVariables. While this works and the new variables are set, the results from the initial variables is used during the transition, which causes an odd flickering result.
Why would Relay give me something different during the transition at all? My expectation would be that this.props.viewer.files.hits would be the same as the previous call while setVariables is doing its thing, not the result from using the initial variables.
const enhance = compose(
lifecycle({
componentDidMount() {
const { files, relay } = this.props
if (files.length) {
relay.setVariables(getCartFilterVariables(files))
}
},
}),
shouldUpdate((props, nextProps) => {
if (props.files.length !== nextProps.files.length && nextProps.files.length) {
props.relay.setVariables(getCartFilterVariables(nextProps.files))
}
return true
})
)
export { CartPage }
export default Relay.createContainer(
connect(state => state.cart)(enhance(CartPage)), {
initialVariables: {
first: 20,
offset: 0,
filters: {},
getFiles: false,
sort: '',
},
fragments: {
viewer: () => Relay.QL`
fragment on Root {
summary {
aggregations(filters: $filters) {
project__project_id {
buckets {
case_count
doc_count
file_size
key
}
}
fs { value }
}
}
files {
hits(first: $first, offset: $offset, filters: $filters, sort: $sort) {
${FileTable.getFragment('hits')}
}
}
}
`,
},
}
)
Ah I finally figured this out. prepareParams was changing the value
export const prepareViewerParams = (params, { location: { query } }) => ({
offset: parseIntParam(query.offset, 0),
first: parseIntParam(query.first, 20),
filters: parseJsonParam(query.filters, null), <-- setting filters variable
sort: query.sort || '',
})
const CartRoute = h(Route, {
path: '/cart',
component: CartPage,
prepareParams: prepareViewerParams, <--updating variable
queries: viewerQuery,
})
Here is the work space :http://jsfiddle.net/WBFa4/51/
The significant part of the code is:
swfobject.embedSWF
(
'http://www.youtube.com/apiplayer?enablejsapi=1&version=3',
'ytplayer_div1',
'425',
'344',
'8',
null,
null,
{
allowScriptAccess: 'always',
allowFullScreen: 'true'
},
{
id: 'ytplayer_object'
}
);
onYouTubePlayerReady=function() {
var ytplayer = document.getElementById("ytplayer_object");
ytplayer.loadVideoById("IMdI_fozMYg");
ytplayer.addEventListener("onStateChange","Hsc");
}
function Hsc(state) {
if(state==0) {
document.getElementById("notif").innerHTML="<p>yeah</p>";
var ytplayer=document.getElementById("ytplayer_object");
ytplayer.loadVideoById("bHQqvYy5KYo");
}
};
In case anyone's interested, here's the working solution:
http://jsfiddle.net/WBFa4/97/
A snippet of code:
onytplayerStateChange=function(newState) {
document.getElementById("notif").innerHTML="<p>yeah</p>";
if(newState==0) { // Here I changed state to newStage.
document.getElementById("notif").innerHTML="<p>yeah</p>";
var ytplayer=document.getElementById("ytplayer_object");
ytplayer.loadVideoById("bHQqvYy5KYo");
}
}
Thanks to sunxperous