todo list optimistic subscription updates with Apollo GraphQl

Question

I am trying to get an optimistic response when I add a task to my todo list:

ADD_TASK and GET_TASK from query.ts

export const GET_TASKS = gql`
  subscription {
    queryTask {
      id
      title
      completed
      user {
        username
      }
    }
  }
`;
export const ADD_TASK = gql`
  mutation addTask($task: AddTaskInput!) {
    addTask(input: [$task]) {
      task {
        id
        title
        completed
      }
    }
  }
`;

addTask() function

     const newId = Math.round(Math.random() * -1000000);
      await addTask({
        variables: {
          task: {
            title: text,
            completed: false,
            user: { username: user?.email },
          },
        },
        optimisticResponse: {
          __typename: "Mutation",
          addTask: {
            __typename: "AddTaskPayload",
            task: {
              __typename: "Task",
              id: newId,
              title: text,
              completed: false,
              user: {
                __typename: "User",
                username: user?.email,
              },
            },
          },
        },
        update(cache, { data: addTask }: any) {
          const queryTask: any = cache.readQuery({
            query: GET_TASKS,
          });
          cache.writeQuery({
            query: GET_TASKS,
            data: {
              queryTask: [...queryTask.queryTask, addTask.addTask.task],
            },
          });
        },
      });

UPDATE

So, I got it working normally, now I just need to get it working with:

1.) Subscriptions
2.) The ID problem... it generates a random ID here instead of knowing what it should be (any suggestions)?

I am using my repository with Dgraph here.

(This does not include the optimistic version)

Any suggestions?

J

question from:https://stackoverflow.com/questions/65876614/todo-list-optimistic-subscription-updates-with-apollo-graphql

Answer 1

Waitting for answers