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

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


0

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.

New contributor

Jdeveloper is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

1 Answer
1


0

The getCollectionReportOverview query returns a String as per the definition at the top of your question. ReportCollectionOverview defines the structure of the input of that query. It appears that 5 of the parameters are required and the rest are optional. It also appears that you’ve defined the variables in your query code (in the js part) correctly.

Your query should simply be:

const GET_COLLECTION_REPORT_OVERVIEW = gql`
  query getCollectionReportOverview($filterReportCollectionOverview: ReportCollectionOverviewInput!) {
    getCollectionReportOverview(filterReportCollectionOverview: $filterReportCollectionOverview)
}

It’s unclear what the returned String should contain. You’re implying that it might be a PDF file in which case it could be base64 encoded or something else.

Since your query incorectly attempts to destructure the return value you’re likely getting a 400 error.

2

  • Hey, the returned string has to be string base 64. My question: is the query well defined? const GET_COLLECTION_REPORT_OVERVIEW = gql` query getCollectionReportOverview($filterReportCollectionOverview: ReportCollectionOverviewInput!) { getCollectionReportOverview(filterReportCollectionOverview: $filterReportCollectionOverview) { collectionNumbers collectionNames productLineNumbers etc… are the variables used in the handleClickCreateViewButton in the file all right? I don't know if I'm using the information correctly. Thanks!!!

    – Jdeveloper

    1 hour ago


  • No, your query is listing the input variables as outputs. Since the query returns a string there are no fields in the output – see the query I posted in my answer.

    – Michel Floyd

    1 hour ago



Leave a Reply

Your email address will not be published. Required fields are marked *