jejunumJ
Convex Communityโ€ข2y agoโ€ข
12 replies
jejunum

useQuery Rerendering whenever new data is patched

I have a rich text editor that is pushing data to my convexDB:

    const EditorComponent = () => {
        const updateContentDebounced = useCallback(_.debounce((content) => {
            updateContent({storageId: _storageId, content: JSON.stringify(content)})
        }, 5000), [_storageId, updateContent]);
    
        const editor: BlockNoteEditor = useBlockNote({
            initialContent: initialContent ? JSON.parse(initialContent) : undefined,
            onEditorContentChange: (editor) => {
                updateContentDebounced(editor.topLevelBlocks);
            },
        });
    
        return <BlockNoteView editor={editor} theme="light"/>;
    };


The below is my updateContent:
export const updateContent = mutation({
    args: {
        storageId: v.optional(v.union(v.null(), v.id("node"))),
        content: v.string(),
    },

    handler: async (ctx, args) => {
        if (args.storageId == null) {   
            return null;
        }
        const node = await ctx.db.patch(args.storageId, 
            {
                content: args.content,
            });
    },
})


The issue lies on each updateContent call, a mutation to the database is made and my front end component then seems to rerender, push a new line & unfocuses. Is this a behaviour of useQuery since it rerenders whenver a query result changes? Keen to hear if there are any ways to navigate this!

Thanks ๐Ÿ™‚
Screen_Shot_2024-02-01_at_3.07.05_pm.png
Was this page helpful?