0

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

Jonathan
  • 3,893
  • 5
  • 46
  • 77
  • 'subscription' ? really? not expected to be refetched/cache updated ... `queryTask` looks like a simple query, not a subscription – xadm Jan 25 '21 at 01:52
  • No, it works perfectly as a subscription in dgraph with apollo so I don't need refetched. I want to update the cache so that it is instant without a delay for better performance. Firebase does this for example. – Jonathan Jan 25 '21 at 03:08
  • I know what is for ... define operation name in query? ... insert debugger ... does cache entry exists (result, in store) for this query/subscription? – xadm Jan 25 '21 at 03:21
  • ... assuming GET_TASKS is imported – xadm Jan 25 '21 at 03:29
  • @xadm Yes, everything works as expected, you can see the queries above that work fine, obviously it is imported, and yes the cache exists. This is a question about how to use **optimistic response**. – Jonathan Jan 25 '21 at 04:23
  • I see only fragments, not one, consistent code, I don't know it is one or many files (query fetched in other one) ... optimistic update works, cache update fails early, updating method is NOT OK, but it's a separate problem ... how cache entry (from earlier fetched subsription) is named, how it looks like? – xadm Jan 25 '21 at 04:55
  • Again, everything works fine without the **optimisticResponse** and **update**. The code is completely consistent. I do not know how the cache stores everything, that is part of the problem. You can see my repository above (queries.ts) and you can view dgraph conventions [here](https://dgraph.io/docs/slash-graphql/slash-quick-start/). – Jonathan Jan 25 '21 at 16:17
  • repo... doesn't contain code you're showing here ... insert `debugger;` before error line (can't guess line#), explore `cache` object internals ... create a branch with normal `queryTask` query (not subscription) and explore cache again, make it working (tasks entries array in store) - `cache.readQuery` (using const or hardcoded query inline - `gql` literal) ... come back with todos array read into variable/const (switch to subscriptions later) ... to fix update (probably not working properly) code – xadm Jan 25 '21 at 17:02
  • I just linked repo so it is easy to see what I am doing. I am not debugging an error, I am looking for specifics on how to write the update code. I have no idea. The subscription will query the exact same results in dgraph, but you could easily replace the word **subscription** with **query** to get it to work. I have no idea how to explore the cache. Everythings works properly but the **update** method, I don't know how to write it. – Jonathan Jan 26 '21 at 00:07

0 Answers0