'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