Subscribe to the offline queue?

[isocra]

I'd like to display an icon to show if there are pending mutations while offline, I can't see any options to find out how big the queue is. Is there a way?

Thanks!

[morrys]

hi @isocra, you can subscribe to updates of the offline store in this way:

• relay-offline: environment.getStoreOffline().subscribe((state, _action) => { });
• apollo-offline: client.getStoreOffline().subscribe((state, _action) => { });

Let me know if this is what you were looking for and I will leave this issue open as a reminder to improve the documentation

[isocra]

Yes thanks, that's what I needed. Here's my implementation in case it's useful to anyone else.

  const [outboxCount, setOutboxCount] = useState<number>(0);
  const client = useApolloClient() as ApolloClient; // import { ApolloClient } from '@wora/apollo-offline';

  useEffect(() => {
    const dispose = client.getStoreOffline().subscribe((state, action) => {
      setOutboxCount(state.length);
    });
    return () => {
      dispose(); // Make sure we unsubscribe when we're unmounted
    };
  });

I then use outboxCount to show a little counter over a cloud icon so that the user can see how many pending mutations there are, if any.

Thanks for your super-quick support!

[sc0ttdav3y]

Hi @morrys,

I'm trying a similar thing to @isocra, but rather than just showing a count I'm wanting to display all my records having pending mutations with an icon in the UI, plus offer a convenient list of the records to the user.

I've looked over the internal structure of ApolloClientOffline's state object and I see it is an array of type OfflineRecordCache<T> with each having a request variable as type Request<T> that in turn has payload as type T.

I was thinking of traversing state to pull out my model types and IDs. With some work I can get my model IDs from request.payload.variables.id and their model name from payload.mutations.definitions.name.value, but that's going to be cumbersome, and it tightly couples to an internal implementation.

Is there a better way for me to work out which models have changed when offline?

If not, what do you think about having a public method to return this data?

Thanks!

[morrys]

Hi @sc0ttdav3y, if I understand correctly, you would like to implement what I did for relay in this sample project with the TodoOffline component.

is it right?

[sc0ttdav3y]

Hi @morrys,

That seems like it could work, but that TodoOffline example exposes a lot of your internal implementation into the React component. My concern on that level of coupling is that things will break if you refactor your work later on.

Ideally we'd have a supported method on the offline store to get our changed data:

const client = useApolloClient();
const store = client.getStoreOffline();

// Get all pending operations for a given mutation.
// This would return an array of Request<T> for the "createTodo" mutation.
const mutations = store.getPendingMutations("createTodo");

From there we can map and reduce our way to get our records, counts, etc.

This proposed method:

• hides away your internal implementation and structures (backup, sink, etc), and
• exposes an easy way to pull a specific mutation queue.

Perhaps I missed something with my second point, as I'm only new to WORA and GraphQL generally, but the second point is something I think is missing in the simpler Todo examples, where things get trickier in real apps when we are dealing with multiple models with multiple mutations.

I guess the proposed API is for your consideration, but that's the general idea.

[morrys]

Hi @sc0ttdav3y, with the onPublish callback function, you can add / modify all the information contained in the mutation that will be queued, except for the payload information.

This allows you to use this information according to your needs both during the entire offline workflow and in the subscription to the offline queue.