react-query#useQuery TypeScript Examples

export function useAirdropCheckQuery(): UseQueryResult<Airdrop | undefined> {
  const { queryClient, contractAddress, queryErrorReporter } =
    useAnchorWebapp();

  const { connected, terraWalletAddress } = useAccount();

  const { network } = useNetwork();

  const result = useQuery(
    [
      ANCHOR_QUERY_KEY.AIRDROP_CHECK,
      terraWalletAddress,
      contractAddress.bluna.airdropRegistry,
      network.chainID,
      queryClient,
    ],
    queryFn,
    {
      enabled: connected,
      keepPreviousData: false,
      onError: queryErrorReporter,
    },
  );

  return terraWalletAddress &&
    result.data &&
    !(airdropStageCache.get(terraWalletAddress) ?? []).includes(
      result.data.stage,
    )
    ? result
    : EMPTY_QUERY_RESULT;
}

export default function UserHeader({
  getContent,
}: {
  getContent?: any
}) {
  const { data, isLoading } = useQuery('userInfo', () =>
    Auth.currentAuthenticatedUser(),
  )
  return (
    <PageHeader>
      <Avatar size={72}>
        {isLoading ? <Spin /> : data?.attributes.name[0]}
      </Avatar>
      <div>
        <h3>
          {getContent
            ? getContent(data?.attributes).title
            : `Welcome ${data?.attributes?.name}, we are glad you are here!`}
        </h3>
        <span>
          {getContent
            ? getContent(data?.attributes).description
            : `Our goal today is to get you one step ahead in your gene
          therapy treatment roadmap`}
        </span>
      </div>
    </PageHeader>
  )
}

useIsUpgradeable = (comptrollerAddress: string) => {
  const { fuse } = useRari();

  const { data } = useQuery(comptrollerAddress + " isUpgradeable", async () => {
    const comptroller = createComptroller(comptrollerAddress, fuse);

    const isUpgradeable: boolean = await comptroller.methods
      .adminHasRights()
      .call();

    return isUpgradeable;
  });

  return data;
}

function useApi<T extends Method>(
  method: T,
  params: Parameters<ApiClient[T]> = [] as Parameters<ApiClient[T]>,
  options?: UseQueryOptions<Methods[T]>,
) {
  const client = useMemo(() => new ApiClient(), []);
  const query = useQuery<Methods[T]>(
    [method, ...params],
    () =>
      // @ts-expect-error
      client[method](...params) as Methods[T],
    options,
  );

  return query;
}

App = ({ setConfig }) => {
  const toggleNotification = useNotification();

  const { isLoading, isFetching } = useQuery(
    "get-config",
    () => fetchConfig(toggleNotification),
    {
      initialData: {},
      onSuccess: (response) => {
        setConfig(response);
      },
    }
  );

  if (isLoading || isFetching) {
    return <LoadingIndicatorPage />;
  }

  return (
    <div>
      <Switch>
        <Route path={getUrl("dashboard")} component={ComingSoonPage} exact />
        <Route path={getUrl("discover")} component={Discover} exact />
        <Route path={getUrl("discover/:id")} component={Details} exact />
        <Route path={getUrl("reports")} component={ComingSoonPage} exact />
        <Route path={getUrl("settings")} component={ComingSoonPage} exact />
        <Route component={NotFound} />
      </Switch>
    </div>
  );
}

useCalendarsQuery = ({ enabled }: Options) => {
  const calendarApi = useApi(gcalendarApiRef);
  const errorApi = useApi(errorApiRef);

  return useQuery(
    ['calendars'],
    async () => {
      const calendars = [];
      let token = '';
      do {
        const { nextPageToken = '', items = [] } =
          await calendarApi.getCalendars({
            maxResults: 100,
            minAccessRole: 'reader',
            pageToken: token,
          });
        token = nextPageToken;
        calendars.push(...items);
      } while (token);

      return calendars;
    },
    {
      enabled,
      keepPreviousData: true,
      refetchInterval: 3600000,
      onError: () => {
        errorApi.post({
          name: 'API error',
          message: 'Failed to fetch calendars.',
        });
      },
    },
  );
}

ViewCardScreen: React.FC<MatchesStackNav<"viewCard">> = ({
  route: {
    params: { id },
  },
}) => {
  const { data, isLoading } = useQuery<OneUserResponse>(
    `/user/${id}`,
    defaultQueryFn
  );

  if (isLoading) {
    return <FullscreenLoading />;
  }

  if (!data?.user) {
    return <FullscreenMessage message="Could not find user" />;
  }

  return (
    <ScreenWrapper>
      <CodeCard onReport={undefined} profile={data.user} />
    </ScreenWrapper>
  );
}

MessageIcon: React.FC<MessageIconProps> = ({ size, color }) => {
  const { data } = useQuery<MeResponse>("/me", defaultQueryFn);
  const { inputValidationErrorBorder } = useTheme();
  const cSize = 18;

  return (
    <View style={{ position: "relative" }}>
      <AntDesign name="message1" size={size} color={color} />
      {data?.user?.unreadMatchUserIds.length ? (
        <View
          style={{
            position: "absolute",
            top: -8,
            right: -10,
            height: cSize,
            width: cSize,
            backgroundColor: inputValidationErrorBorder,
            borderRadius: cSize / 2,
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <MyText>{data.user.unreadMatchUserIds.length}</MyText>
        </View>
      ) : null}
    </View>
  );
}

useResource = <ResourceData>(
  userConfigOrKey: ResourceOptionsOrKey<QueryResourceOptions<ResourceData>>,
  requestOptions: QueryOptions<ResourceData> = {}
): ResourceQueryResult<ResourceData> => {
  const userConfig = useConfigResolver(userConfigOrKey)
  const { key, ...options } = userConfig
  const {
    fetchResource: { fn },
  } = useDefaultResourceConfig<ResourceData>()

  const { requestConfig = {}, overrideGlobalOnError, ...queryOptions } = deepmerge(options, requestOptions)

  const queryClient = useQueryClient()
  const globalOnError = queryClient.getDefaultOptions()?.queries?.onError

  if (!!queryOptions.onError && globalOnError && !overrideGlobalOnError) {
    queryOptions.onError = injectInCallback(queryOptions.onError, globalOnError)
  }

  return useQuery(
    [key, requestConfig.lookupField, requestConfig.params] as QueryKey,
    () => fn(key, requestConfig),
    queryOptions
  )
}

useEvents = () => {
  return useQuery("eventData", async () => {
    const yesterday = new Date(Date.now() - (3600 * 1000 * 24));
    const {
      data: {
        listEventsActive: { items: events },
      },
    } = await API.graphql({
      query: listEventsActive,
      variables: { active: "yes", startDate: { gt: yesterday } },
      authMode: "AWS_IAM",
    });

    const sorted = events.sort(
      (a, b) => new Date(a.startDate) - new Date(b.startDate)
    );

    return sorted.map((event) => ({
      ...event,
      name: event.name || event.type.name,
      description: event.description || event.type.description,
      time: event.time || event.type.time,
      maxEntries: event.maxEntries || event.type.maxEntries,
      color: event.type.color,
      url: event.type.url,
      isFull: event.entryCount >= (event.maxEntries || event.type.maxEntries)
    }));
  });
}