optimistic-gold

Cookies on the client

Is there an equivalent of getCookie, setCookie, parseCookie, etc from '@tanstack/react-start/server' but for the client? I'm trying to setup i18next and ran into hydration mismatches, so I'm trying to set it both on the server and the client from a cookie.

9 Replies

like-gold•3mo ago

no. could maybe be a nice addition to add isomorphic versions of those functions for now, you need to create your own via something like this

const getIsomorphicCookie = createIsormophicFn().server(() => getCookie()).client(() => document.cookie)

const getIsomorphicCookie = createIsormophicFn().server(() => getCookie()).client(() => document.cookie)

optimistic-goldOP•3mo ago

Thanks! The client code is a bit hacky, but worked perfectly. Here is the code for anyone that may be interested (I'm using the user's browser as a fallback):

import { LANG_COOKIE_NAME } from "~/lib/constants/cookies";
import { createIsomorphicFn } from "@tanstack/react-start";
import { getCookie } from "@tanstack/react-start/server";
import i18n from "./init";

export const setupI18n = createIsomorphicFn()
  .server(() => {
    const lang = getCookie(LANG_COOKIE_NAME)

    if (lang) {
      i18n.changeLanguage(lang)
    } else if (navigator.language) {
      i18n.changeLanguage(navigator.language)
    }
  }).client(() => {
    let cookies = new Map<string, string>();
    document.cookie.split(';').forEach(function (el) {
      let split = el.split('=');
      cookies.set(split[0].trim(), split.slice(1).join("="))
    })
    const lang = cookies.get(LANG_COOKIE_NAME);

    if (lang) {
      i18n.changeLanguage(lang)
    } else if (navigator.language) {
      i18n.changeLanguage(navigator.language)
    }
  })

import { LANG_COOKIE_NAME } from "~/lib/constants/cookies";
import { createIsomorphicFn } from "@tanstack/react-start";
import { getCookie } from "@tanstack/react-start/server";
import i18n from "./init";

export const setupI18n = createIsomorphicFn()
  .server(() => {
    const lang = getCookie(LANG_COOKIE_NAME)

    if (lang) {
      i18n.changeLanguage(lang)
    } else if (navigator.language) {
      i18n.changeLanguage(navigator.language)
    }
  }).client(() => {
    let cookies = new Map<string, string>();
    document.cookie.split(';').forEach(function (el) {
      let split = el.split('=');
      cookies.set(split[0].trim(), split.slice(1).join("="))
    })
    const lang = cookies.get(LANG_COOKIE_NAME);

    if (lang) {
      i18n.changeLanguage(lang)
    } else if (navigator.language) {
      i18n.changeLanguage(navigator.language)
    }
  })

Use setupI18n in client.tsx and server.ts and you are good to go.

like-gold•3mo ago

would use this for cookie parsing https://github.com/unjs/cookie-es

GitHub

GitHub - unjs/cookie-es: 🍪 Cookie and Set-Cookie parser and seri...

🍪 Cookie and Set-Cookie parser and serializer. Contribute to unjs/cookie-es development by creating an account on GitHub.

like-gold•3mo ago

(on the client)

optimistic-goldOP•3mo ago

I will take a look, thanks!

foreign-sapphire•3mo ago

was actually searching for this the other day :p need to pin unjs tools to visit more often 😄, thanks

deep-jade•3mo ago

Could you solve this hydration problem?

optimistic-goldOP•3mo ago

Yes, using isomorphic functions does the trick

xenial-black•3mo ago

Thanks for this thread, i will check it out 😍😍

Gaming

Programming

Cookies on the client

Did you find this page helpful?