Best way to make exactly one API call in react-native (fetch, axios etc.)?

Question

I am currently creating an app that includes a barcode scanner. Unfortunately, the only company I found - that seems to own 90+% of all food barcodes - provides an API starting at 500$/ year. So I tried to create a workaround which works but fires so many API calls that I get blocked immediately after one try. I inserted a console.warn to see how many calls are fired everytime I call the API and it's about 20 to 35 times. Here is the code:

    async getApiData() {
      let formData = new FormData();
      formData.append('keyValue', 4015000961547);
      formData.append('requestTradeItemType', 'ownership');
      formData.append('keyCode', 'gtin');
      formData.append('someRandomToken', '1');
      const response = await fetch('http://gepir.gs1.org/index.php?option=com_gepir4ui&view=getkeylicensee&format=raw', {
        method: 'post',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          'Cookie': 'someRandomCookie'
        },
        body: formData
      });
      if (response.status == 200) {
        const responseJson = JSON.parse(response._bodyText);
        const productName = responseJson.gepirParty.partyDataLine.gS1KeyLicensee.partyName;
        this.setState({ productName });
      }
    }

If you try it with this keyValue of 4015000961547 you will get Henkel AG in case you want to test (http://gepir.gs1.org/index.php/search-by-gtin). What I don't understand is: why is my function firing so many requests to the API once the barcode is read altough I am using async/ await? I read that axios is the better method but it didn't really work in my case ... is there a third/ fourth method I could try? It is very crucial that once I have the scan data I only send one request to the API otherwise I can't test it.

Just to provide all the information needed this is my code for getting the barcode data after the scan. I am using react-native-camera:

import { RNCamera } from 'react-native-camera';
... some more code ...

export default class Scanner extends Component {
  ... some code ...

   async onBarCodeRead(scanResult) {
    console.warn(scanResult.type);
    if (scanResult.data != null) {
      console.warn(scanResult.data);
      const eanCode = await scanResult.data;
    }
    return;
  }
  ...some code here...

  render() {
    return (
      <View>
        <RNCamera
          ref={ref => {
            this.camera = ref;
          }}
          barcodeFinderVisible={this.state.camera.barcodeFinderVisible}
          defaultTouchToFocus
          mirrorImage={false}
          onBarCodeRead={this.onBarCodeRead.bind(this)}
          onFocusChanged={() => {}}
          onZoomChanged={() => {}}
          type={this.state.camera.type}
        />
        <View>
          <Text>Please scan the barcode.</Text>
        </View>
      </View>
    );
  }
}

For simplicity, I removed any styling and unused props in the RNCamera tag.

score 1 · Accepted Answer · answered Feb 20 '19 at 00:43

1

This appears to be a feature -- that it continuously scans for a barcode. There is an issue thread on the repo where it is suggested to set a flag the first time the event is emitted, like so:

onBarCodeRead = (...someArgs) => {
  if (!this.isBarcodeRead) {
     this.isBarcodeRead = true;
     // Do your work
  }
}

answered Feb 20 '19 at 00:43

Kai

2,529
1
15
24

Thank you, @Kai ... no clue how I could miss that but it did solve at least the problem of the unlimited scan. Appreciated! – Mickey Mahoney Feb 20 '19 at 16:28

Best way to make exactly one API call in react-native (fetch, axios etc.)?

1 Answers1