urql/vue How to setup client on client side and server side

[snaplesec]

How do I configure the client on the client side and the server side? For instance there is nothing specifying the url, also I would expect the server side would need to have the url set, not the client side. Then would need to know where to set the authentication token on client or server in the request? I see some stuff in the prepass docs for React, but nothing like it in the Vue Suspense docs for SSR.

I am getting this error:
Error: You are creating an urql-client without a url.
at new Client (C:\Users\SteveNaples\OWL\insuredportal-graphql-application-ssr\node_modules@urql\core\dist\urql-core.js:479:11)
at Object.install (C:\Users\SteveNaples\OWL\insuredportal-graphql-application-ssr\node_modules@urql\vue\dist\urql-vue.js:2:53)
at Object.use (C:\Users\SteveNaples\OWL\insuredportal-graphql-application-ssr\node_modules@vue\runtime-core\dist\runtime-core.cjs.js:2983:28)
at render (c:/Users/SteveNaples/OWL/insuredportal-graphql-application-ssr/src/entry-server.ts:35:9)
at C:\Users\SteveNaples\OWL\insuredportal-graphql-application-ssr\server.ts:78:39

Line 35 of entry-server is this:
app.use(urql, {
exchanges: [dedupExchange, cacheExchange, ssr, fetchExchange]
})

[JoviDeCroock]

We need to know the url we are sending requests to this is what the url property is used for, you have to provide the client to the vue application https://formidable.com/open-source/urql/docs/basics/vue/#providing-the-client

[snaplesec]

This is the server side in an SSR application, I used the docs and the code was just like in the docs.
There is no information to set the url. That's what my concern was, how does it get set? The client side code also wants it too. So, the docs the way they are written don't make sense to me.
https://formidable.com/open-source/urql/docs/advanced/server-side-rendering/

[JoviDeCroock]

There are a few aspects to the problem space you are describing here, the document you linked is how a client is created for server vs browser.

You'll create a client like the link I sent earlier both on client and server as we need a way to establish our form of communication, when we know we'll be fetching data on the server we'll need to add an ssr-exchange, this exchange will be used to gather all fetched data during the server-side render, this data will be injected in a script tag when sent to the client and on the client the ssr-exchange can then rehydrate the data. This is how it commonly happens in most ssr web applications that are client-side hydrated.

When we fetch data on the server we'll use the same terminology as we do on the client, we'll do a useQuery but use an async setup function. https://formidable.com/open-source/urql/docs/basics/vue/#vue-suspense

[snaplesec]

Ok, that helps some.
But this was showing what I have above in my original question. That is the server side of the client, so that doesn't show a url at all, and so that was why I was having difficulties.
https://formidable.com/open-source/urql/docs/advanced/server-side-rendering/#vue-suspense

[JoviDeCroock]

The doc builds up, you start by providing your client and then querying data. Let's see if we can clarify that 😅

[snaplesec]

That sounds good.