'How to make data of Apollo useQuery() Readonly?
I am using ApolloClient's useQuery to fetch data and react table for table.
React table is expecting data to be read-only. As per their documentation, the data should use useMemo().
The column is defined as
const columns = useMemo(() => [
{
Header: t('api.id'),
accessor: 'id',
},
{
Header: t('api.attribute_name'),
accessor: 'attribute_name',
},
{
Header: t('api.attribute_type'),
accessor: 'attribute_type',
cell: (props: any) => {console.log(props)
return (<p>t(getAttributeTypeName(row.type))</p>)}
},
{
Header: t('api.actions'),
accessor: 'actions',
}
] as Column<IAttributeData>[], []
)
Query is defined as:
const {loading, data} = useQuery<IAttributeData>(FIND_ALL_ATTRIBUTES)
While using table from react query as
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable({columns, data: data?.findAllAttributes ? data.findAllAttributes : []})
For columns: Type 'IAttribute[]' is not assignable to type 'readonly IAttributeData[]'.
I guess it had to do with useMemo() but failed to find solution.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
