Cache invalidation for changes of the messages

[ChristianIvicevic]

Is your feature request related to a problem? Please describe.

In my application I use static messages loaded from a json file together with dynamically loaded messages. When interacting with the application I noticed that changes to the messages don't propagate in the UI and the values returned from the t function returns by useTranslations seem to be cached. Here's a simplified snippet of what I am doing:

  const { data } = useGraphQL(dynamicI18nQueryDocument);

  const dynamicMessages = (data.i18nStrings ?? []).reduce<Record<string, string>>(
    (acc, { key, en }) => ({ ...acc, [key]: en }),
    {}
  );
  const mergedMessages = { ...messages, ...dynamicMessages };

  return (
    <NextIntlClientProvider
      locale={locale}
      messages={mergedMessages}>
      {children}
    </NextIntlClientProvider>
  );

When invalidating the GraphQL query I can confirm that the new values are in the context and available in the hooks such as useTranslations but the value returned by any t('variable') that has been changed is still the same because it's memoized somehow.

Describe the solution you'd like

I'd prefer if the translation function returned by useTranslations can be invalidated easily in those cases where values change or get added to the context because they are not reflected at the moment.

Describe alternatives you've considered

n/a

[amannn]

Hey and thanks for the great feature request! That's a good point, this will be fixed with #199.