Fetching is always true? Even though data is received from the endpoint

[JoaoFGuiomar]

I have the weirdest behaviour in a small Todo List I made and it seems to be cache?

example: https://urql-demo-git-master.joaofguiomar.now.sh/ repo: https://github.com/JoaoFGuiomar/urql-demo

When you load the page it says Loading... and I have a console.log that confirms that fetching is true. However when I check the network tab I can see the data came back but the app doesn't seem to refresh.

If I refresh the page, sometimes the data is there, sometimes its stuck in the loading again.

This gif is me just trying a mix of Command + R and Command + Shift + R

:thinking:

[kitten]

~You're likely having some problems since you haven't set up SSR; at least that's one possibility since it'll be hard to just run the example quickly.~

Edit: I misread your post. It seems you're expecting SSR to work without having set it up? 😅

So maybe try whether following this example works 😀 https://github.com/FormidableLabs/urql/tree/master/examples/3-ssr-with-nextjs

[JoaoFGuiomar]

🤔 Its a bit confusing because sometimes it works, sometimes it doesn't.

I'll take a look at that. Thanks!

[kitten]

So, I'm having trouble understanding what you expect, sorry 😅 you say in your title that you received data, but that it's fetching. So it is in fact working, right? But you're looking to set up server-side rendering so that the client receives and rehydrates data from the server?

You might want to read our docs on server-side rendering for a short explanation on how SSR works 👍 https://github.com/FormidableLabs/urql/blob/master/docs/basics.md#server-side rendering

But you won't need to do this manually as the example we have already has all files and some code to set it up with Next.js; but let me know if you have more questions or need more help 🙌

[JoaoFGuiomar]

Maybe I didn't explain myself properly.

I have a <TodoList /> that has a useQuery() fetching some todo items. I was expecting the component to fetch the data, show loading... while fetching is true and when the data comes back, display it.

at the moment what seems to be happening is:

• the website loads,
• fetching is true, showing loading...
• loading... remains on the screen but checking the network tab I can see data was sent back.
• refreshing the page flashes the list of Todo item but they disappear and loading... is back

I'm not trying to use server side rendering, just a simple flow: -> query data -> wait for data (loading...) -> show data (todo list with items)

[JoaoFGuiomar]

😩 It seems to be working all of sudden ¯_(ツ)_/¯ I'm glad I recorded the gif because I didn't change anything special 🤔

app: https://urql-demo.joaofguiomar.now.sh/

[kitten]

I tried refreshing your demo a bunch of times and I can't reproduce this 😅 my guess is there might be an edge case on the control flow when SSR hasn't been added but react is rehydrating. This might be because you're using a global client on the server and client-side. 🤔

So maybe do try setting up SSR properly and it should be just fine

[JoaoFGuiomar]

Not sure what to say, it just started working ¯\_(ツ)_/¯

Thanks!

[JoaoFGuiomar]

@kitten

About that weird behaviour, It seems to happen only in localhost 🤔

and I noticed the following warning:

maybe this will help to figure out what i'm doing wrong.