GraphQL Relay mutation with spread fragment selection does not update state after commit

GraphQL Relay mutation with spread fragment selection does not update state after commit


0

I have this todos-list component

import { Suspense } from "react";
import { graphql, useFragment, useLazyLoadQuery } from "react-relay";
import { todosQuery } from "./__generated__/todosQuery.graphql";
import { todos_todos$key } from "./__generated__/todos_todos.graphql";

export default function Todos() {
  const data = useLazyLoadQuery<todosQuery>(
    graphql`
      query todosQuery {
        todos {
          ...todos_todos
        }
      }
    `,
    {}
  );
  return (
    <Suspense fallback="is loading...">
      <TodosList todosRef={data.todos} />
    </Suspense>
  );
}

function TodosList({ todosRef }: { todosRef: todos_todos$key }) {
  const todos = useFragment(
    graphql`
      fragment todos_todos on Todo @relay(plural: true) {
        name
        id
      }
    `,
    todosRef
  );
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          {todo.id}
          {todo.name}
        </li>
      ))}
    </ul>
  );
}

and an input component

import { useState } from "react";
import { graphql, useMutation } from "react-relay";

export default function todoInput() {
  const [name, setName] = useState("");
  const [commit, isInFlight] = useMutation(graphql`
    mutation todoInputMutation($input: CreatetodoInput!) {
      createtodo(input: $input) {
        ...todos_todos
      }
    }
  `);
  const onSubmit = () => {
    commit({ variables: { input: { name } } });
  };

  return isInFlight ? (
    <div>updating...</div>
  ) : (
    <form onSubmit={onSubmit}>
      <input
        name="name"
        value={name}
        onChange={(val) => setName(val.currentTarget.value)}
      />
      <button type="submit">add</button>
    </form>
  );
}

And Todo is defined as

type Todo implements Node {
  id: ID!
  name: String!
}

I expect the value of the referenced todos_todos fragment to be updated without having to use an optimistic updater nor any reloading but instead following this https://relay.dev/docs/tutorial/mutations-updates/#using-fragments-in-the-mutation-response . but this pattern is not working as expected. Any help would be appreciated.


Load 5 more related questions


Show fewer related questions

0



Leave a Reply

Your email address will not be published. Required fields are marked *