Thread.Root
<Thread.Root> is a primitive component that sets up context for other thread
thread components like <Thread.Messages>, <Thread.MessageForm>.app.tsx
import {
SuperinterfaceProvider,
Thread,
} from '@superinterface/react'
export const App = () => (
<SuperinterfaceProvider>
<Thread.Root>
<Thread.Messages />
</Thread.Root>
</SuperinterfaceProvider>
)
Props
Here's a summary of the props available for the
<Thread> component:variables
app.tsx
import {
SuperinterfaceProvider,
Thread,
} from '@superinterface/react'
export const App = () => (
<SuperinterfaceProvider>
<Thread.Root
variables={{ threadId: 'thread_123' }}
>
<Thread.Messages />
</Thread.Root>
</SuperinterfaceProvider>
)
When you set
variables, these things happen:variables are merged into all child Superinterface query and mutation keys as the
second parameter (e.g. const [keyBase, { threadId }] = queryKey and
const [keyBase, { threadId }] = mutationKey). This allows you to use
variables in all child queryFn functions.variables are merged into all child Superinterface mutation variables. This
allows you to use variables in all child mutationFn functions.