使用:“react apollo”:“^1.4.3”
在父组件中,我使用GraphQL查询父节点“Fund”和子节点“fundQuarterlyMetric”。这将以以下格式返回数据:
{
id
name
...
fundQuarterlyMetrics (orderBy: asAtDate_ASC) {
id
year
quarter
...
}
}
当我尝试创建新的fundQuarterlyMetrics时,我必须使用更新功能(apollo客户端文档)更新react apollo上的本地存储。这给了我一个错误:
Can't find field Fund({}) on object (ROOT_QUERY) {
"Fund({\"id\":\"cj57hpfips0x7014414u5tk8m\"})": {
"type": "id",
"id": "Fund:cj57hpfips0x7014414u5tk8m",
"generated": false
}
问题是,当我console.log代理时,我可以在数据下看到基金和它的孩子......不知道该怎么办...
更新以下评论:
以下是父组件数据请求:
export const fundPageQuery = gql`
query Fund($fundId: ID!) {
Fund(id: $fundId) {
id
name
....other variables
fundQuarterlyMetrics (orderBy: asAtDate_ASC) {
id
year
quarter
....other variables
}
}
} `;
以下是我使用的选项:
var optionsForCreateFundMetric = {
update: (proxy, {data: {createFundMetrics}}) => {
try {
console.log('proxy', proxy);
const data = proxy.readQuery({query: FundQL.fundPageQuery});
console.log('data', data);
data.Fund.fundQuarterlyMetrics.push(createFundMetrics);
proxy.writeQuery({query: FundQL.fundPageQuery, data})
} catch (e) {
console.log('error adding to store', e);
}
}};
export default compose(
graphql(FundQL.createFundMetrics, {name: 'createFundMetrics', options:
optionsForCreateFundMetric}),
graphql(FundQL.updateFundMetrics, {name: 'updateFundMetrics'})
)(FundMetricsForm);
这是我的创建突变:
export const createFundMetrics = gql`
mutation createFundQuarterlyMetric(
$fundId: ID
$year: Int!
$quarter: FUND_QUARTERLY_METRIC_QUARTER!
$netIRR: Float!
$tvpi: Float!
$rvpi: Float!
$dpi: Float!
$asAtDate: DateTime
$calledThisQuarter: Float!
$distributedThisQuarter: Float!
$cumulativeCalled: Float!
$cumulativeDistributed: Float!
$limitedPartnersNAV: Float!
$quarterlyValuationChangeLCY: Float
$quarterlyTotalReturn: Float
) {
createFundQuarterlyMetric(
fundId: $fundId
year: $year
quarter: $quarter
netIRR: $netIRR
tvpi: $tvpi
rvpi: $rvpi
dpi: $dpi
asAtDate: $asAtDate
calledThisQuarter: $calledThisQuarter
distributedThisQuarter: $distributedThisQuarter
cumulativeCalled: $cumulativeCalled
cumulativeDistributed: $cumulativeDistributed
limitedPartnersNAV: $limitedPartnersNAV
quarterlyValuationChangeLCY: $quarterlyValuationChangeLCY
quarterlyTotalReturn: $quarterlyTotalReturn
) {
id
year
quarter
netIRR
tvpi
rvpi
dpi
asAtDate
calledThisQuarter
distributedThisQuarter
cumulativeCalled
cumulativeDistributed
limitedPartnersNAV
quarterlyValuationChangeLCY
quarterlyTotalReturn
}
} `;
解决方案感谢丹尼尔-我必须归还基金ID才能使其正常工作,所以谢谢你!
export default compose(
graphql(FundQL.createFundMetrics, {name: 'createFundMetrics', options:
optionsForCreateFundMetric, variables: {fundId:
createFundQuarterlyMetric.fund.id}}),
graphql(FundQL.updateFundMetrics, {name: 'updateFundMetrics'})
)(FundMetricsForm);
Apollo文档在强调这一事实方面做得很差,但当您调用readQuery以从存储中获取以前获取的查询时,如果该查询包含任何变量,则需要传入这些相同的变量来检索它。假设突变返回的id是基金的id,您应该可以修改此行:
const data = proxy.readQuery({
query: FundQL.fundPageQuery,
variables: { id: createFundMetrics.id },
});
我有以下代码,我正在尝试决定如何处理错误: 服务器发回一个GraphQL错误对象,并将其发回,使其出现在突变的块中。如果变异成功,组件的数据将使用参数更新,但我看不到处理错误的等价方法。 理想情况下,我希望更新块中的Apollo缓存,但在这一点上,我甚至不能向组件或状态注入道具。 最终的结果是在Register组件上设置一个prop/state,它显示了一个带有条件呈现的错误消息组件。一种方法可以
我创建了一个由Apollo客户端和graphQL驱动的react应用程序 定义了我的架构,因此预期结果是一个对象数组(<代码>[{名称:“metric 1”,类型:“type A”},{名称:“metric 2”,类型:“type B”})]) 在jsx文件中,我定义了以下查询: 我用Apollo HOC包装了组件,如下所示: Apollo客户端工作正常,并在渲染方法中返回道具的预期列表。 我想让
如何转换react查询以适应自定义类型?? 注意:我在前端使用的是JavaScipt,而不是Typescript
我的用途是case是一个map组件。我只希望当用户按下按钮时加载标记的数据,但不是在初始组件安装或位置改变时。 下面的代码示例:
我正在尝试使用带有查询的脚本来更新特定的文档,但我不确定我需要使用jest客户端的哪一个类,该客户端与update by query一起工作 而不是_update如何获取_update_by_query
假设Component-TODOList需要以两种不同的方式显示TODO的列表,listview和gridview。假设我想保持两个视图作为不同的组件,那么最佳实践是什么- > 使用graphql查询创建TodoList组件,然后将查询结果传递给TODOListView和TODOGridView组件? 创建没有graphql查询的TodoList组件,然后在ToDoListView和TODOGri