docs/react/mutations

[giscus[bot]]

docs/react/mutations

a GraphQL client built for rapid iteration.

https://gqty.dev/docs/react/mutations

[AlexanderMoroz]

Hey! Really keen on your library and looking forward to use it in a future projects!

Just wondering - what is a best way to send multiple mutations at once? so for example I need to add two entities which are related to each other

I can do it in callback which we're passing in useMutation as

useMutation((mutation, args) => {
    const createdData1= mutation.insert_data_1(args);
    const id = createdData1?.id;
    mutation.insert_data_2({ ...args,  data_1_id: id })
})

Or we can do it something like this

[create, ] = useMutation((mutation, data) => {
    const data = mutation.insert_data_1(args);
    return data;
});

create(data1args).then((data) => ...call another mutation here)

what is a proper way to it? Thanks in advance?

[vicary]

Such pattern has no guarantee on atomicity so we usually don't advocate it.

But if you have no choice, e.g. working with external APIs, chaining promises via the core API resolved().then(...) makes more sense to me. Sticking with the React API may led to multiple tedious useEffect() which is a known anti-pattern.

Using the core API also allows you to wrap both of the mutations in auto-retries with idemptency keys, in the case of an intermediate network failure.

[AlexanderMoroz]

Hello again!

Just want to clarify one thing. Could you explain please - why if we don't read any data from result of mutation it looks like mutation itself doesn't fire at all?

so for example I have this

mutation.update_assets_by_pk({
   pk_columns: { id: args.id },
   set: { name: args.name },
})

mutation is not firing, but if I just add

mutation.update_assets_by_pk({
   pk_columns: { id: args.id },
   set: { name: args.name },
})?.name

it's working... quite confusing, because for example sometime we need to update parts that we use in our subscriptions, so there is no need to refetch or do something with result

Thanks!

[vicary]

Imagine a normal GraphQL query. If the mutation response is a type, you have to select something.

mutation {
  update_assets_by_pk(...) {
    # For this query to exist, you must select at least a field.
    __typename
  }
}

It is the same concept in GQty, if we don't need the data we usually just query __typename as a placeholder.

[mmailaender]

Could GQty implicitly query for __typename? Then the first example would also work and would make it more intuitive for new people. I know Apollo is also fetching __typename as a default without specifying

[vicary]

@mmailaender This is possible, but only makes sense in mutations. In mutations the main goal is to fire the request. Sometimes you don't want to care about the response, but in fact you should.

Mutations should select all the fields used in other components with query, this automatically updates the cache and in turn triggers an update on those components. This saves you one query request, because referchQueries in mutation is there only for indirectly related query types.

This behaviour may also introduce another issue, where <>{query.me}</> still fires the query but it renders [Object object] which is usually not what you want.

[mmlngl]

Enjoying GQTY very much! Bit confused by mutations still.
I'm trying to redirect my app to a new url formed from the id returned by a mutation.

In my useCreateProject hook:

const [createProject, result] = useMutation((mutation, { name }) => {
    
    const data = mutation.insert_projects_one({
      object: { name: name },
    });

    // This line is need to make the GQTY warning disappear.
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const _projectId = data?.id;

    return data;
  }, opts);

In the hook consumer component…

const { createProject } = useCreateProject({
    onCompleted(data) {
      console.log('onComplete', data?.id);
    },
  });

Problem: onComplete returns undefined once. How do I get the id?

I get that it's a proxy, so how do I wait for the real value?

Thanks for your help.

[vicary]

Please share a minimum reproducing repo.

I made a simple mutation example and didn't show your described behavior, try playing with https://stackblitz.com/edit/nextjs-eg4v6o

Side note: The demo API in my Stackblitz always return the same id, so if you try giving it an id other than "Hello World" the response object will be empty because of a cache miss. That's how our normalized cache works.