React mutation with graphql

Questions and Answers Frontend-React
1

Hi
can not find a way how to use react mutation with graphql and strapi.
I have used strapi to create data, and now i would like useres to add data to the fields

strapi
strapi916×487 22.1 KB

what is the code to add data via react to existing data collection?
for ex: i used the playground of graphql to mutate data , and its working , how could i add it as a react code?
mutation {
createReveiw(input: { data: {body:“the”,title: “avitest”, rating: 5} }) {
reveiw {
body
title
rating
}
}
}

2

You should use graphql client libraries, such as Apollo GraphQL and URQL.

image
image1118×334 35.1 KB

reference: LogRocket - GraphQL clients for JavaScript and NodeJS

For example, if you use Apollo GraphQL, first you install it with :
npm install @apollo/client graphql

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

// Define mutation
const CREATE_REVEIW = gql`
  mutation {
createReveiw(input: { data: {body:“the”,title: “avitest”, rating: 5} }) {
reveiw {
body
title
rating
}
}
}
`;

function MyComponent() {
  // Pass mutation to useMutation
  const [createReveiwFunction, { data, loading, error }] = useMutation(CREATE_REVEIW);}
3

thanks much. this is my code, but i am getting an err"

Line 19:17: ‘data’ is not defined no-undef
Line 21:9: ‘loading’ is not defined no-undef
Line 22:9: ‘error’ is not defined no-undef
Line 22:44: ‘error’ is not defined no-undef
Line 27:36: ‘data’ is not defined no-undef
Line 28:16: ‘data’ is not defined no-undef
Line 30:12: ‘data’ is not defined no-undef

import React from ‘react’

import { useMutation, gql } from ‘@apollo/client’

const CREATE_REVEIW = gql`

mutation {

createReveiw(input: { data: {body:“Lorem ipsum dolor sit am”,title: “avitesttesting”, rating: 5} }) {

reveiw {

body

title

rating

}

}

}

`;

export default function AddTodo() {

const [createReveiw, { data, loading, error }] = useMutation(CREATE_REVEIW);}

console.log(data);



if (loading) return 'Submitting...';

if (error) return `Submission error! ${error.message}`;



return (

  

    <div className="review-card">

      <div className="rating">{data.reveiw.rating}</div>

      <h2>{data.reveiw.title}</h2>



      {data.reveiw.categories.map(c => (

        <small key={c.id}>{c.name}</small>

      ))}



      <p>{data.reveiw.body}</p>

    </div>

  )
4

I’m really sorry about that. I hope Strapi discord members can help you : Strapi Community.

Feel free to ask on Help Channels → frontend-react