将函数结果传递给graphql突变

Question

My checker() function determines if a user's input (checkedNumber) has a match in my database of prime numbers. If there is, I need updateCheckedNumber() to run so that checkedNumber.matchingPrime is updated with that prime number. I cannot figure out how to pass the prime number to the mutation.

Here's the code form my component. Currently, I'm hardcoding matchingPrime to be updated to "100." This reflects correctly in the database.

class Prime extends Component {
  updateCheckedNumber = async (checkedNumber) => {
    await this.props.updateCheckedNumber({
      variables: {
        id: checkedNumber.id,
        matchingPrime: checkedNumber.matchingPrime
      },
      update: store => {
        const data = store.readQuery({ query: CheckedNumbersQuery });
        data.checkedNumbers = data.checkedNumbers.map(
          x =>
            x.id === checkedNumber.id
            ? {
                ...checkedNumber, matchingPrime: "100"
              }
            : x
        );
        store.writeQuery({ query: CheckedNumbersQuery, data });
      }
    })
  }

  checker = () => {
    let primes = (this.props.data.primeNumbers)
    let nums = this.props.checkedNumbersFromParent;
    let recentCheckedObject = (nums[nums.length - 1]);
    let recentCheckedNumber = (nums[nums.length - 1].text);
    let recentCheckedRegExp = new RegExp(recentCheckedNumber);
    for (var i in primes) {
      let count = 0;
      if (primes[i].text.search(recentCheckedRegExp) >= 0 && count < 1) {
        count = count + 1;
        this.updateCheckedNumber(recentCheckedObject);
      }
    }
  }

Here are my resolvers from my server side:

const resolvers = {
  Query: {
    primeNumbers: () => PrimeNumber.find(),
    checkedNumbers: () => CheckedNumber.find()
  },
  Mutation: {
    createCheckedNumber: async (_, {text}) => {
      const checkedNumber = new CheckedNumber({text, matchingPrime: "nada"});
      await checkedNumber.save();
      return checkedNumber;
    },
    updateCheckedNumber: async (_, {id, matchingPrime}) => {
      await CheckedNumber.findByIdAndUpdate(id, {matchingPrime});
      return true;
    },

Thank you very much for looking at this.

Answer 1

I see you have a resolver, but I haven't seen a schema for your updateCheckedNumber resolver. Given your resolver we can make a schema as follows:

##updateCheckedNumber.graphql
type Prime {
  id: String
  value: Number
}

type Mutation {
  updateCheckedNumber(id: String!, matchingPrime: Number!): Prime
}

Now you're going to need a query string that you can pass into your react component as a prop. We can do that using gql from graphql-tag as follows:

const updateCheckedNumber = gql`
  mutation updateCheckedNumber($id: String!, $matchingPrime: Number!) {
    updateCheckedNumber(id: $id, matchingPrime: $matchingPrime) {
      id,
      value
    }
  }
`

Now that we have that we need to wrap our react component with graphql from react-apollo as follows:

export default graphql(updateCheckedNumber, {
  name: 'updateCheckedNumber'
})(MyReactComponent)

Now inside your react component you have access to props.updateCheckedNumber and you call it like this:

props.updateCheckedNumber({
  variables: {
    id: theId,
    matchingPrime: theCheckedNumber
  }
})

Hope this helps!

PS If you have a Query that that gives you a list of the prime numbers, such as primeNumbers , you will need to refetchQueries in the options of the graphql call. Or update your InMemoryCache manually.