Urql: Serverside mutations, cache and ssrCache (suspense)

[fivethreeo]

I have a activation component for account verification

I would like to do something like the code below and not execute the mutation again client-side.

There are two issues with this. Mutations are not cached so this leads to a eternal loop server-side.

Also the ssrCache does not cache mutations so the mutation is run again client-side. How would I go about doing this?

const Activate = () => {

  const [token, setToken] = useQueryParam('token', StringParam);
  const [uid, setUid] = useQueryParam('uid', StringParam);
  const [res, executeMutation] = useMutation(ActivateMutation);

  if (!res.data) executeMutation({token: token, uid: uid});

  let display = <p>Activation unsuccessful</p>

  if (res.data && res.data.success) {
    display = <p>Activation successful</p>
  }
  return (display)
}

export default Activate; 

[kitten]

So, it's probably never a good idea to execute mutations as part of a component and with server-side rendering to be honest. In fact, they won't trigger suspense so there's also no way to wait for them to complete.

This is basically why there's no SSR caching or suspense consideration for mutations. ☀️

So there's a couple of things you can try, since this is a side-effect:

• have a server-side route that does the activation and then redirects
• do the activation as part of your server using a middleware or something similar and then step into React rendering
• only do the mutation client-side and show that it's in progress

There's probably more options than this that im not mentioning right now 🙂

btw we just created a Spectrum community. Since thats a full thread/community chat it is often more well suited for asking questions and receiving answers quickly 🙌 https://spectrum.chat/urql

[fivethreeo]

Query-Mutation. Potato-potato :) In case anyone wonders how I solved this.

[fivethreeo]

I do agree on never a good idea to execute mutations as part of a component. But doing the other solution would be easier with #216

[kitten]

@fivethreeo That's true, but to be fair, that's usable already :) all we're looking to do is to probably reduce this code:

import { createRequest } from 'urql';
import { pipe, toPromise } from 'wonka';

const req = client.createRequestOperation(
  'mutation',
  createRequest(doc, vars)
);

const promise = pipe(client.executeMutation(req), toPromise);

to more like this:

import { pipe, toPromise } from 'wonka';
const promise = pipe(client.mutation(doc, vars), toPromise);

so in the meantime you could create a helper for this pattern and already use it 👍

I'll close this issue for now, since there's no specific request or question leftover then. I hope the earlier comment and this one sufficiently helped, but feel free to let me know if there's any other questions, or create a thread on Spectrum or a new issue if you have any other questions or issues 😄

[fivethreeo]

Ah, was looking at the other issues. This code was nowehere to be found. But this community seems great and inclusive. Kudos :)