Is this pattern of sending a JSON.stringify'ed object to the key array acceptable and is it bad/good performance-wise?

[wansaleh]

Hi all.

I need to send a variables object to the GraphQL fetcher function. In most cases, I can't put all of the variables into the key array.

I tried this ❌:

const client = new GraphQLClient(...);

const query = gql`...some GraphQL query`;
const variables = { ...some variables to merge with the gql query };

const { data } = useSWR(
  [query, variables],
  (q, v) => client.request(q, v),
);

And it triggered multiple rerenders and multiple recalls to the backend GraphQL server, which we certainly do not want. This is expected, as documented:

Keep in mind that you should not recreate objects when rendering, as they will be treated as different objects on every render:

// Instead, you should only pass “stable” values.
useSWR(['/api/user', id], (url, id) => query(url, { id }))

Now I tried this pattern of "sending a JSON.stringifyed object, then JSON.parseing it in the fetcher". Just wanted to ask: it is acceptable in practice? It works perfectly in my few tests. No more unwanted recalls to backend and rerenders. But I wondered about the performance hit. This is the example code:

const { data } = useSWR(
  [query, JSON.stringify(variables)],
  (q, v) => client.request(q, JSON.parse(v)),
);

I'd appreciate if anyone can tell whether this pattern is considered OK.

Thanks.

[shuding]

It's OK I think. Because normally JSON serialization/deserialization will definitely not be the bottleneck of a web app, especially when you have API requests. If you do see a noticeable performance issue (I guess something else is wrong then), you can maybe try https://github.com/fastify/fast-json-stringify.

According to fastify/fast-json-stringify, JSON.stringify execution is 3,172,653 ops/sec for objects, which is 0.0003ms each time. So your React component has to be re-rendered 10,000 times per second (definitely a bug!), so JSON serialization can make the app 3ms slower :)