How can I use this graphQL DTO in my react app?

I have been given a task that I have to use a query and download a pdf when I click on a button.
The thing is that I’m new to graphQL and the backend guy has just sent to me this

type Query{
    getCollectionReportOverview(filterReportCollectionOverview:ReportCollectionOverview ): String!
}
input ReportCollectionOverview {
    collectionNumbers: [Int]!    
    collectionNames: [String]!
    productLineNumbers: [String]
    productLineNames: [String]
    purchaseDivisionNumbers: [Int]
    purchaseDivisionNames: [String]
    buyerEmails: [String]
    buyerNames: [String]
    styleCategoryNumbers: [String]
    styleCategoryNames: [String]
    deliveryPeriodNumbers: [Int]
    deliveryPeriodNames: [String]
    supplierNumbers: [String]
    supplierNames: [String]
    styleNumbers: [Int]
    brandName: String!
    createdByName: String!
    createdBy: UUID!
    sortBy: String!
}

So far I was able to create this query in my front

import { gql } from '@apollo/client';

const GET_COLLECTION_REPORT_OVERVIEW = gql`
  query getCollectionReportOverview($filterReportCollectionOverview: ReportCollectionOverviewInput!) {
    getCollectionReportOverview(filterReportCollectionOverview: $filterReportCollectionOverview) {
      collectionNumbers
      collectionNames
      productLineNumbers
      productLineNames
      purchaseDivisionNumbers
      purchaseDivisionNames
      buyerEmail
      buyerNames
      styleCategoryNumbers
      styleCategoryNames
      deliveryPeriodNumbers
      deliveryPeriodNames
      supplierNumbers
      supplierNames
      styleNumbers
      brandNames
      createdByName
      createdBy
    }
  }
`;
export { GET_COLLECTION_REPORT_OVERVIEW };

But I don’t get see it working in the network tab. I’m a bit lost and confused.

Right now I have done this so far in my code:

export const ReportsFooter = ({
    isOptionSelected,
    handleOnClearAll,
    sortby,
    collectionNames,
    collectionNumbers,
   }: {
    isOptionSelected: boolean;
    handleOnClearAll: () => void;
    sortby: string;
    collectionNames: Array<string>;
    collectionNumbers: Array<number>;
  }): ReactElement => {
  const theme = useTheme();
  const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'));

  const { selectedBrands } = useSelectedBrands();
  const [loading, setLoading] = useState(false);

  const [getCollectionReportOverview, {error, data: reportsData }] = useLazyQuery(GET_COLLECTION_REPORT_OVERVIEW, {
    onCompleted: () => {
      setLoading(false); // When the query is complete
    },
    onError: (err) => {
      setLoading(false); // When an error occurs
      console.error(err);
    },
  });

  const handleClickCreateViewButton = (): void => {
    setLoading(true);
    setTimeout(() => {// Set loading to true when initiating the data retrieval
    getCollectionReportOverview({
      variables: {
        collectionNames: collectionNames,
        collectionNumbers: collectionNumbers,
        brandName: selectedBrands[0]?.brandName,
        createdByName: 'YourCreatedByName',
        createdBy: 'YourCreatedBy',
        sortBy: sortby,
      },
      pollInterval: 0,
      fetchPolicy: 'network-only',
      context: { clientName: GraphClientNames['reports'] },
    });
    setTimeout(() => {
      setLoading(false); // Set loading to false when the query is complete
    }, 3000); // Duration to simulate loading (adjust as needed)
  }, 1000); // Delay before initiating download (adjust as needed)
  };

  const hintComponent = (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        flex: '1',
        alignItems: 'center',
      }}
    >
      <Box
        sx={{
          display: 'flex',`your text`
          alignItems: 'center',
          flexDirection: 'row',
          justifyContent: 'space-between',
          flex: '1',
        }}
      >
        <Typography variant={isLargeScreen ? 'body.default' : 'bodySmall.default'} sx={{ whiteSpace: 'nowrap' }}>
          * required:&nbsp;
        </Typography>
        <Typography variant={isLargeScreen ? 'body.highlight' : 'bodySmall.highlight'} sx={{ paddingLeft: 1, whiteSpace: 'nowrap' }}>
          {isOptionSelected ? '1/1' : '0/1'}
        </Typography>
      </Box>
      <Typography variant='captions.default' sx={{ paddingLeft: 1, whiteSpace: 'nowrap' }}>
        {isOptionSelected ? "You're good to go" : 'Select a Collection'}
      </Typography>
    </Box>
  );

  return (
    <ProcessFooter
      leftSideComponents={[
        <Button
          key='cancel-button'
          variant="outlined"
          size={isLargeScreen ? 'large' : 'small'}
          disabled={!isOptionSelected}
          onClick={handleOnClearAll}
        >
          <CrossIcon style={{ padding: '0px 12px 0px 0px' }} />
          clear all
        </Button>,
      ]}
      hint={hintComponent}
      rightSideComponents={[
        loading ? (
          <Stack
            justifyContent="center"
            alignItems="center"
            spacing={5}
          >
            <LoadingSpinner />
            <Typography variant="headings.h4" textAlign="center">
              generating report
            </Typography>
          </Stack>
        ) : (
          <CreateViewButton
            key='create-orders-button'
            isLargeScreen={isLargeScreen}
            isOptionSelected={isOptionSelected}
            sortbyValue={sortby}
            collectionNames={collectionNames}
            collectionNumbers={collectionNumbers}
            onClick={handleClickCreateViewButton}
          />
        ),
      ]}
    />
  );
};

I’m using useLazyQuery and passing the mandatory variables. I know that it isn’t finished yet but I want to see if the query works and what shall I change in the code.