Graphql Subscription firing multiple times

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

GraphQL API

Amplify Categories

api

Environment information

# Put output below this line
  System:
    OS: macOS 11.1
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Memory: 761.16 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.16.0 - /usr/local/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 6.14.11 - /usr/local/bin/npm
  Browsers:
    Chrome: 91.0.4472.77
    Firefox Developer Edition: 91.0
    Safari: 14.0.2
  npmPackages:
    @aws-amplify/ui-react: ^1.0.3 => 1.0.3 
    @date-io/moment: ^1.3.13 => 1.3.13 
    @material-ui/core: ^4.11.3 => 4.11.3 
    @material-ui/data-grid: ^4.0.0-alpha.22 => 4.0.0-alpha.22 
    @material-ui/icons: ^4.11.2 => 4.11.2 
    @material-ui/lab: ^4.0.0-alpha.57 => 4.0.0-alpha.57 
    @material-ui/pickers: ^3.2.10 => 3.2.10 
    @reduxjs/toolkit: ^1.5.1 => 1.5.1 
    @testing-library/jest-dom: ^5.11.9 => 5.11.9 
    @testing-library/react: ^11.2.5 => 11.2.5 
    @testing-library/user-event: ^12.7.3 => 12.7.3 
    aws-amplify: ^3.3.21 => 3.3.21 
    aws-amplify-react: ^4.2.25 => 4.2.25 
    aws-appsync: ^4.0.3 => 4.0.3 
    aws-appsync-react: ^4.0.3 => 4.0.3 
    clsx: ^1.1.1 => 1.1.1 
    graphql: ^15.5.0 => 15.5.0 (14.0.0, 0.13.0)
    graphql-tag: ^2.11.0 => 2.11.0 
    isomorphic-fetch: ^3.0.0 => 3.0.0 
    lodash: ^4.17.21 => 4.17.21 
    moment: ^2.29.1 => 2.29.1 
    prop-types: ^15.7.2 => 15.7.2 
    react: ^17.0.1 => 17.0.1 
    react-apollo: ^3.1.5 => 3.1.5 
    react-big-calendar: ^0.33.2 => 0.33.2 
    react-dom: ^17.0.1 => 17.0.1 
    react-number-format: ^4.5.1 => 4.5.1 
    react-redux: ^7.2.3 => 7.2.3 
    react-router-dom: ^5.2.0 => 5.2.0 
    react-scripts: 4.0.3 => 4.0.3 
    recharts: ^2.0.8 => 2.0.8 
    redux: ^3.7.2 => 3.7.2 (4.0.5)
    redux-promise-middleware: ^4.4.2 => 4.4.2 
    redux-thunk: ^2.3.0 => 2.3.0 
    semantic-ui-react: ^2.0.3 => 2.0.3 
    styled-components: ^5.2.1 => 5.2.1 
    styled-components/macro:  undefined ()
    styled-components/native:  undefined ()
    styled-components/primitives:  undefined ()
    uuid: ^8.3.2 => 8.3.2 (3.4.0, 3.3.2)
    web-vitals: ^1.1.0 => 1.1.0 
  npmGlobalPackages:
    @aws-amplify/cli: 4.44.1
    npm: 6.14.11
    yarn: 1.22.11

Describe the bug

I am building an app for event planners. When they create an event, i have a graphql subscription that calls a function to create a “quote” record with a relationship to that event. It works but a random amount multiple quotes with all the same data (except for the ID) get created.

Expected behavior

I want only one Quote record to get created.

Reproduction steps

When a subscription for createEvent graphql mutation triggers createQuote.

Code Snippet

 useEffect(() => {
   const subscription = API.graphql( graphqlOperation(subscriptions.onCreateEvent) ).subscribe({
      next: ({ provider, value }) => addQuote(value.data.onCreateEvent),
      error: error => console.warn(error)
    });    
    subscription.unsubscribe()
  }, [])

  async function addEvent() {
    try {
      const event = { ...formState }
      await API.graphql(graphqlOperation(createEvent, {input: event}))
      handleNext()
    } catch (err) {
      console.log('Error Creating Event:', err)
    }
  }

  async function addQuote(data) {
    try {
        await API.graphql(graphqlOperation(createQuote, {input: { 'eventid' : data.id, 'useremail': data.useremail, 'name': data.name + ' Quote', 'status': 'Open'  }}))
        console.log('QUOTE ADDED FOR:' + data.name)
        //history.go(0)  
    } catch (err) {
      console.log('Error Adding Quote:', err)
    }
  }

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[funes79]

yes, correct. I already figured it out, thanks!

[chrisbonifacio]

@funes79 looks you might not have been unsubscribing properly from the subscriptions. in your useEffect, you should be returning a function that calls the unsubscribe cleanup function. If your subscriptions are not getting cleaned up, the current one won’t stop and a new one will start each time the component renders.

  React.useEffect(() => {
    const subscription = API.graphql(
      graphqlOperation(onCreateProduct)
    ).subscribe({
      next: ({ provider, value }) => {
        console.log({ provider, value });
      },
      error: (error) => console.warn(error),
    });
    
    return () => subscription.unsubscribe();
  }, []);