[英]React-Apollo, don't run query on component load
I'm using the awesome https://github.com/apollographql/react-apollo library and I'm trying to see if there is a better convention to load data into components than how I'm doing it now. 我正在使用awesome https://github.com/apollographql/react-apollo库,我试图看看是否有更好的约定将数据加载到组件中,而不是我现在正在做的事情。
I've set up my components to with the apollo HOC to load data into my components, like so: 我已经将我的组件设置为与apollo HOC一起将数据加载到我的组件中,如下所示:
const mainQuery = gql`
query currentProfileData($userId:String, $communityId:String!){
created: communities(id:$communityId) {
opportunities{
submittedDate
approvalDate
status
opportunity{
id
}
}
}
}
`;
const mainQueryOptions = {
options: {
variables: { userId: '_', communityId: '_' },
},
};
const ComponentWithData = compose(
graphql(mainQuery, mainQueryOptions),
)(Component);
This setup works great, but with some problems. 这个设置很好,但有一些问题。
I end up with queries that always run twice, as I need to pass props to apollo refetch for the query. 我最终会遇到总是运行两次的查询,因为我需要将props传递给apollo refetch以进行查询。 I also have to pass in some dummy data (aka the "_") to prevent useless data fetching.
我还必须传入一些虚拟数据(也称为“_”)以防止无用的数据获取。
I end up having to do some fancy checking in componentWillReceiveProps to prevent loading the query multiple times. 我最终不得不在componentWillReceiveProps中进行一些花哨的检查,以防止多次加载查询。
Short of my sidestepping the HOC all together and manually running the queries through apollo directly, how can I solve this? 我没有将HOC全部放在一起并直接通过apollo手动运行查询,我该如何解决?
Just a little follow up. 只需一点跟进。
With the insight of @daniel, I was able to solve my 2 primary problems, run queries with props, and skipping the query conditionally until it's ready. 借助@daniel的洞察力,我能够解决我的2个主要问题,使用道具运行查询,并有条件地跳过查询,直到它准备就绪。 I just wanted to post my final code result.
我只是想发布我的最终代码结果。 As you can set functions for both of these options, it helps a ton.
由于您可以为这两个选项设置功能,因此可以提供很多帮助。
const mainQueryOptions = {
skip: ({ community: { id: communityId } }) => !communityId,
options: ({ community: { id: communityId }, user: { id: userId = '_' } }) => ({
variables: { userId, communityId },
}),
};
You can find more info here on the apollo api page: http://dev.apollodata.com/react/api-graphql.html#graphql 您可以在apollo api页面上找到更多信息: http : //dev.apollodata.com/react/api-graphql.html#graphql
If you're utilizing your component's props as the variables used in the refetch
call, there is in fact a cleaner approach. 如果您将组件的props用作
refetch
调用中使用的变量,实际上有一种更refetch
方法。 The options
property can actually be a function that takes your component's props. options
属性实际上可以是一个获取组件道具的函数。 This lets you derive your variables from the props passed to your component. 这使您可以从传递给组件的props中派生变量。 It would look something like this:
它看起来像这样:
const mainQueryOptions = {
options: ({ userId, communityId }) => ({
variables: { userId, communityId },
},
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.