Thread.Root
<Thread.Root> sets up thread context for child components like <Thread.Messages> and <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.Root> 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.