i am using react and apollo and i faced a weird issue, never seen it before
i fetched some data, notice that that the "Switch1" and "Switch2" have an array of values inside options property. the response data image
the reponse data:
{data: {,…}}
data: {,…}
getCustomAttributs: [{__typename: "CustomAttribut", format: "Text", id: 0, label: "Your Full Name", name: "Full Name",…},…]
0: {__typename: "CustomAttribut", format: "Text", id: 0, label: "Your Full Name", name: "Full Name",…}
1: {__typename: "CustomAttribut", format: "Text", id: 1, label: "Your Email Adress", name: "Email",…}
2: {__typename: "CustomAttribut", format: "Switch", id: 2, label: "Switch1", name: "Switch1",…}
format: "Switch"
id: 2
label: "Switch1"
name: "Switch1"
options: [{__typename: "AttributOption", id: 0, label: "111111", value: "111111"},…]
0: {__typename: "AttributOption", id: 0, label: "111111", value: "111111"}
1: {__typename: "AttributOption", id: 1, label: "222222", value: "222222"}
2: {__typename: "AttributOption", id: 2, label: "333333", value: "333333"}
required: false
visible: "OFFLINE"
__typename: "CustomAttribut"
3: {__typename: "CustomAttribut", format: "Switch", id: 3, label: "Switch2", name: "Switch2",…}
format: "Switch"
id: 3
label: "Switch2"
name: "Switch2"
options: [{__typename: "AttributOption", id: 0, label: "a", value: "a"},…]
0: {__typename: "AttributOption", id: 0, label: "a", value: "a"}
1: {__typename: "AttributOption", id: 1, label: "b", value: "b"}
2: {__typename: "AttributOption", id: 2, label: "c", value: "c"}
3: {__typename: "AttributOption", id: 3, label: "d", value: "d"}
4: {__typename: "AttributOption", id: 4, label: "e", value: "e"}
required: false
visible: "OFFLINE"
__typename: "CustomAttribut"
4: {__typename: "CustomAttribut", format: "Radio", id: 4, label: "Radio", name: "Radio",…}
5: {__typename: "CustomAttribut", format: "Select", id: 5, label: "Select", name: "Select",…}
and i am logging that data immediately without editing anything, here is the code for it:
useEffect(() => {
if (data && data.getCustomAttributs) {
dispatch({ type: "SET_INPUTS", payload: data.getCustomAttributs });
console.log("data inputs", data);
}
}, [data?.getCustomAttributs]);
if (loading) {
return <div>LOADING...</div>;
}
if (error) {
return <div>Error screen...</div>;
}
and the issue comes here in this image console.log() result or in this console result:
data inputs
{getCustomAttributs: Array(6)}
getCustomAttributs: Array(6)
0: {id: 0, name: "Full Name", label: "Your Full Name", required: true, format: "Text", …}
1: {id: 1, name: "Email", label: "Your Email Adress", required: true, format: "Text", …}
2:
format: "Switch"
id: 2
label: "Switch1"
name: "Switch1"
options: Array(3)
0: {id: 0, label: "111111", value: "111111", __typename: "AttributOption"}
1: {id: 1, label: "222222", value: "222222", __typename: "AttributOption"}
2: {id: 2, label: "333333", value: "333333", __typename: "AttributOption"}
length: 3
__proto__: Array(0)
required: false
visible: "OFFLINE"
__typename: "CustomAttribut"
__proto__: Object
3:
format: "Switch"
id: 3
label: "Switch2"
name: "Switch2"
options: Array(5)
0: {id: 0, label: "111111", value: "111111", __typename: "AttributOption"}
1: {id: 1, label: "222222", value: "222222", __typename: "AttributOption"}
2: {id: 2, label: "333333", value: "333333", __typename: "AttributOption"}
3: {id: 3, label: "d", value: "d", __typename: "AttributOption"}
4: {id: 4, label: "e", value: "e", __typename: "AttributOption"}
length: 5
__proto__: Array(0)
required: false
visible: "OFFLINE"
__typename: "CustomAttribut"
__proto__: Object
4: {id: 4, name: "Radio", label: "Radio", required: true, format: "Radio", …}
5: {id: 5, name: "Select", label: "Select", required: true, format: "Select", …}
length: 6
__proto__: Array(0)
__proto__: Object
and the same issue appears in the UI
"Switch2" is getting the 3 first options from "Switch1", after that it fill the rest with it's own options. Every object in this array will receive the options values from the first element that have options populated ("Switch1" in this case) because the first 2 items (Full Name and Email) have an empty array in options.
Thanks in advance