relay
relay copied to clipboard
useLazyLoadQuery skip?
It looks like skip
parameter of useLazyLoadQuery
was removed at some point, and I do not see any mention of it in release notes or advice how to migrate away, e.g. code that was using it:
import {
type RedirectToStripeCheckoutType,
useContraProStripeCheckout,
} from './useContraProStripeCheckout.js';
import { useCurrentUser } from './useCurrentUser.js';
import { useUserTypeSelector } from './useUserTypeSelector.js';
import { type useUpgradeToProQuery } from '@/__generated__/relay/useUpgradeToProQuery.graphql.js';
import { useLazyLoadQuery } from 'react-relay';
import { graphql } from 'relay-runtime';
type CTAType = 'UPGRADE_TO_PRO';
export const useUpgradeToPro = ({
skip = false,
}: {
skip?: boolean;
} = {}): {
hasActivePortfolioSubscription: boolean;
isGeneratingStripeLink: boolean;
redirectToStripeCheckout: RedirectToStripeCheckoutType;
upgradeCTAType: CTAType | null;
} => {
const { selectedUserType } = useUserTypeSelector();
const currentUser = useCurrentUser();
const { isGeneratingStripeLink, redirectToStripeCheckout } =
useContraProStripeCheckout();
const data = useLazyLoadQuery<useUpgradeToProQuery>(
graphql`
query useUpgradeToProQuery {
visitor {
userAccount {
profile {
hasActivePortfolioSubscription
}
}
}
}
`,
- {
- skip,
- },
);
const hasActivePortfolioSubscription =
data?.visitor?.userAccount?.profile?.hasActivePortfolioSubscription ??
false;
const baseShouldShowCTA =
!skip &&
selectedUserType === 'CONTRACTOR' &&
currentUser &&
!hasActivePortfolioSubscription;
return {
hasActivePortfolioSubscription,
isGeneratingStripeLink,
redirectToStripeCheckout,
upgradeCTAType: baseShouldShowCTA ? 'UPGRADE_TO_PRO' : null,
};
};
This is causing me some issues as well. I need it for a search input — it doesn't make sense to fetch something on render, but only when the user has entered a search string. So, I would like to skip this when the query is empty.
Wouldn't work using the @skip
directive from GraphQL?
query useUpgradeToProQuery($skip: Boolean!) {
visitor @skip(if: $skip) {
userAccount {
profile {
hasActivePortfolioSubscription
}
}
}
}
The request would still fire, just with a smaller GQL query. But we want to avoid the request altogether.