Javascript 我通过GraphQL进行的查询在我的Web应用程序上正确地返回了数据,但在手机上没有。为什么?
我建立了一个电子邮件按钮,向用户发送他们在选举中投票的选择的收据。该函数返回web上的正确信息。它返回选举名称、选票名称和选项名称。这些标题和名称的数据是使用GraphQL从查询中提取的。问题是当有多个选项的选票时,例如3,收据显示3个选项名称,但它们都是相同的 当我控制台记录查询中的数据时,它会显示与上面显示的相同的收据信息,名称在移动设备上重复,但不会在Web上重复。我已经比较了Web和移动中的功能和查询的代码,没有发现任何差异,我甚至从正在工作的Web应用程序复制了代码,并将其粘贴到移动应用程序中,但没有成功。该移动应用程序采用Expo和React Native构建 我在这一点上感到困惑,无法理解同一个查询如何返回不同的数据Javascript 我通过GraphQL进行的查询在我的Web应用程序上正确地返回了数据,但在手机上没有。为什么?,javascript,reactjs,react-native,graphql,apollo-client,Javascript,Reactjs,React Native,Graphql,Apollo Client,我建立了一个电子邮件按钮,向用户发送他们在选举中投票的选择的收据。该函数返回web上的正确信息。它返回选举名称、选票名称和选项名称。这些标题和名称的数据是使用GraphQL从查询中提取的。问题是当有多个选项的选票时,例如3,收据显示3个选项名称,但它们都是相同的 当我控制台记录查询中的数据时,它会显示与上面显示的相同的收据信息,名称在移动设备上重复,但不会在Web上重复。我已经比较了Web和移动中的功能和查询的代码,没有发现任何差异,我甚至从正在工作的Web应用程序复制了代码,并将其粘贴到移
//graphql
import {
ELECTION_REPORT,
MY_VOTE,
FETCH_BALLOTS,
} from '../../graph/queries/elections';
import { SEND_EMAIL } from '../../graph/mutations/elections';
const ElectionsComponent = ({ item, navigation }) => {
const { id, title, endDate, startDate } = item;
** THESE HOLD THE DATA FOR THE USER AND UNION **
const unionState = useUnionState();
const userState = useUserState();
const [setEmail, setNewEmail] = useState(userState.profile.email);
const [receipt, setReceipt] = useState();
const [timeVoted, setTimeVoted] = useState();
const [dataReady, setDataReady] = useState(false);
const [storedBallot, setStoredBallot] = useState();
const { loading } = useQuery(ELECTION_REPORT, {
variables: {
unionID: unionState.id,
electionID: id,
},
notifyOnNetworkStatusChange: true,
onCompleted: (data) => {
if (data.electionReport) {
data.electionReport.forEach((report) => {
if (report.respondentID == userState.id) {
setReceipt(report.recieptID);
}
});
}
},
});
const { loading: ballotLoading, data: ballotData } = useQuery(FETCH_BALLOTS, {
variables: {
unionID: unionState.id,
electionID: id,
},
onCompleted: () => {
// THIS IS WHERE THE STORED BALLOT IS CREATED
const mappedBallots = new Map();
if (ballotData && ballotData.ballots) {
ballotData.ballots.forEach((val) =>
mappedBallots.set(val.id, { title: val.title, votedFor: [**Titles populate here**] })
);
}
setStoredBallot(mappedBallots);
getMyVote();
},
});
const [getMyVote, { loading: userVoteLoading, error, data }] = useLazyQuery(
MY_VOTE,
{
variables: {
unionID: unionState.id,
electionID: id,
receiptID: receipt,
},
notifyOnNetworkStatusChange: true,
onCompleted: () => {
data.myVote.forEach((vote) => {
setTimeVoted(vote.respondedAt);
if (storedBallot.has(vote.ballotID)) {
const value = storedBallot.get(vote.ballotID);
value.votedFor.push(vote.votedFor.title);
storedBallot.set(vote.ballotID, value);
}
});
setDataReady(true);
},
}
);
const [sendEmail, { loading: submitLoading }] = useMutation(SEND_EMAIL, {
onCompleted: () => {
// Shows the email was sent successfully
},
onError: (error) => {
// Shows if the email mutation failed
},
});
const submitEmail = () => {
if (dataReady) {
let content = `<div style="display: flex;justify-content: center;margin: 20px 0">
<img src="${
unionState.information.imageURL
}" alt="Union Logo" style="width: 125px;height: 125px;border-radius: 10px">
</div>\n
<h1 style="font-style: italic;text-align: center;line-height: 1.3">${title}</h1>\n
<p style="margin-top:20px">On ${format(
new Date(timeVoted),
'PPPPp'
)}</p>`;
storedBallot.forEach((poll) => {
content =
content +
`<h3 style="margin-top:40px">For ${poll.title}</h3>\n <=== THIS IS THE OPTION TITLE
<p>You selected:</p>`;
poll.votedFor.map((option) => {
content = content + `<p style="margin-left:30px">${option}</p>`;
});
});
content =
content +
`<h5 style="margin-top:80px">Receipt ID:</h5>\n
<p>${receipt}</p>`;
sendEmail({
variables: {
email: [setEmail],
sender: 'Requested Vote Receipt',
subject: 'Here is what you selected',
content: content,
},
});
}
};
return (
<Card>
<Text>
Receipt ID: {receipt.slice(-5)}
</Text>
<BlackButton
title='Email My Receipt'
onPress={() => submitEmail()}
/>
</Card>
);
};
export default ElectionsComponent;
返回数据的方式是,每个选票作为一个对象返回,如果选票有多个选定选项,则将为用户选择的每个选项创建一个具有相同选票id的对象。然后,在创建storedBallot时,我将选票id分组在一起,这将保存“votedFor”标题的数组。如果有任何关于为什么这不起作用的建议,我洗耳恭听。我怀疑Expo是因为没有查询错误、奇怪/不必要的数据/状态管理。。。记录您的状态更改。。。准备工作,可编辑
export const ELECTION_REPORT = gql`
query electionReport(
$unionID: UnifiedID!
$electionID: UnifiedID!
$ballotID: UnifiedID
$reportType: String
) {
electionReport(
unionID: $unionID
electionID: $electionID
ballotID: $ballotID
reportType: $reportType
) {
id
ballotID
respondentID
imageURL
optionID
respondedAt
mode
ipAddress
userAgent
respondent {
id
firstName
}
votedFor {
title
}
recieptID
}
}
`;
export const MY_VOTE = gql`
query myVote(
$unionID: UnifiedID!
$electionID: UnifiedID!
$receiptID: String!
) {
myVote(unionID: $unionID, electionID: $electionID, receiptID: $receiptID) {
id
ballotID
respondentID
imageURL
optionID
respondedAt
mode
ipAddress
userAgent
respondent {
id
firstName
lastName
}
votedFor {
title
}
recieptID
abstained
}
}
`;