relay icon indicating copy to clipboard operation
relay copied to clipboard

useLazyLoadQuery skip?

Open gajus opened this issue 7 months ago • 3 comments

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,
  };
};

gajus avatar Nov 07 '23 15:11 gajus

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.

MoSattler avatar Jan 22 '24 15:01 MoSattler

Wouldn't work using the @skip directive from GraphQL?

      query useUpgradeToProQuery($skip: Boolean!) {
        visitor @skip(if: $skip) {
          userAccount {
            profile {
              hasActivePortfolioSubscription
            }
          }
        }
      }

noghartt avatar Jan 22 '24 15:01 noghartt

The request would still fire, just with a smaller GQL query. But we want to avoid the request altogether.

MoSattler avatar Jan 22 '24 16:01 MoSattler