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.