How to work with autogenerated hooks and subscriptions on Apollo?

[ItzaMi]

I'm currently trying to implement subscriptions into a project but I'm having some issues understand how I need to adapt my setup with the autogenerated hooks.

Initially my code looked like this:

const [getLiveCount, { data }] = useEventThreatsLiveCountLazyQuery()

And it's query is

query EventThreatsLiveCount {
  eventThreatsLiveCount
}

Now I want to implement a subscription

subscription Threat {
  threat {
    id
  }
}

And connect my eventThreatsLiveCount to it but I'm unsure how I should proceed.
I've looked into subscribeToMore but can't figure out what I should use on document:, for example.
Could someone help me?

[jackdh]

+1 @ItzaMi Did you ever figure it out?

[ItzaMi]

We did end up reaching a favourable solution but I'm unsure if it is correct.

Our current setup looks like this and lives inside Home/index.tsx (since that's the scene for the authenticated user)

const Home = () => {
    [... more code]
    
    useTokenQuery({ //this is a query that just gets the user's token
    /**
     * HACK 😢 (kind of)
     * We have to change the `fetchPolicy` to 'no-cache'
     * so that we don't experience the continuous retrigger of the `getMe` query
     * This seems to be due to the fact that the user token kept on cache and the one from the
     * request are different
     */
    fetchPolicy: 'no-cache',
    onCompleted: (data) => {
      const token = data.userCurrent?.token

      if (!token) {
        return
      }

      Auth.saveWsToken(token) // this token should be used for the subscriptions

      subscribeToMore({
        document: ThreatUpdatesDocument,
        updateQuery: (prev, { subscriptionData }) => {
          /**
           * HACK 😢
           * ts / graphql codegen is considering the subscriptionData to have a type similar to the
           * return of the query itself and not the subscription return type, so we need to cast it to any
           */
          const subscriptionThreatData = subscriptionData.data as any
          
          if (
            prev.threatsLiveCount === null ||
            prev.threatsLiveCount === undefined ||
            !subscriptionThreatData
          ) {
            return prev
          }

          const newCount = subscriptionThreatData.threat.isResolved
            ? prev.threatsLiveCount - 1
            : prev.threatsLiveCount + 1

          return { ...prev, threatsLiveCount: newCount }
        },
      })
    },
  })
  
  [... more code]
}

Probably not very useful but that's what we have.
We also had to change some of our setup for the client since we're using Elixir/Phoenix and that might have something to do with the hack for our token management.

[jackdh]

@ItzaMi I did figure it out.

So I actually did find the proper way to do this fully typed without hooks:

Make sure to include a .graphql subscription in your code:

subscription reportWeekUpdated {
    reportWeekModelUpdated {
        ...ReportWeekFragment // <--- use fragments always, that way you get auto created typed interfaces as well.
    }
}
```

Then when you run codegen it will generate the required types as below.

```typescript
subscribeToMore<ReportWeekUpdatedSubscription, ReportWeekUpdatedVariables>({ //  <--- ReportWeekUpdatedSubscription generated by codgen
document: ReportWeekUpdatedDocument,  // <--- Document also done by code gen
updateQuery: (prev, data) =>
	produce(prev, (draft) => { // <--- produce is from immerJS to make immutable updates easy.
		const newGroup = data.subscriptionData.data.reportWeekModelUpdated;  // <--- typed autocomplete
		...work
		return draft;
	}),
});
```

[jackdh]

A second way is to use the hooks which require less typing of types.

const { data, refetch, updateQuery } = useGetItemQueriesQuery();

useItemUpdateSubscriptionsSubscription({
    onSubscriptionData: (x) => {
        const incomingValue = x.subscriptionData.data?.itemUpdated;
        if (!incomingValue) return draft;
        updateQuery((prev) =>
            produce(prev, (draft) => {
                for (const incoming of incomingValue) {
                    if (incoming.reason === SubscriptionUpdateReason.Delete) {
                        draft.itemBoxs = draft.itemBoxs.filter((x) => x.id !== incoming.itemBox.id);
                    } else {
                        const found = draft.itemBoxs.findIndex((x) => x.id === incoming.itemBox.id);
                        if (found !== -1) {
                            draft.itemBoxs[found] = incoming.itemBox;
                        } else {
                            draft.itemBoxs.push(incoming.itemBox);
                        }
                    }
                }
                return draft;
            }),
        );
    },
});

This way is fully typed without having to import them yourselves. I'd still recommend Immer for the easy immutable updates.