Client without finStackAuth

[quentinbinotcarrier]

Hello,

I'm trying to use haystack-react / haystack-nclient with a haystack server that uses a proprietary token authentification. When I create Client, it seems to create a POST request to http://localhost:3000/finStackAuth whatever I do... and get stuck here.

Is there a way to skip this step and configure the header myself ?

Note: In my case the server is a completely different host.

My code is pretty simple so I will share it below :

import logo from './logo.svg';
import './App.css';

import React from 'react';
import { Container } from '@mui/material';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';

import { HDict, HRef, HStr, HVal } from 'haystack-core'
import { Client } from 'haystack-nclient'
import { ClientContext, useWatch } from 'haystack-react'

const client = new Client({
    base: new URL("http://localhost:8084"),
})

function App() {
  const { grid, isLoading, error } = useWatch({
        filter: 'point and curVal',
        pollRate: 1
    })

    if (isLoading) {
        return <h1>Loading...</h1>
    }

    if (error) {
        return <h1>Error: {error.message}</h1>
    }

  return (
    <div className="App">
      <ClientContext.Provider value={client}>
        <Container>
          <TableContainer component={Paper}>
            <Table sx={{ minWidth: 650 }} aria-label="simple table">
              <TableHead>
                <TableRow>
                  <TableCell>id</TableCell>
                  <TableCell align="right">dis</TableCell>
                  <TableCell align="right">curVal</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {grid.getRows().map(
                  (row: HDict): JSX.Element => {
                    return (
                      <TableRow key={String(row.get<HRef>('id')?.value)} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
                        <TableCell component="th" scope="row">{String(row.get<HRef>('id')?.value)}</TableCell>
                        <TableCell align="right">{String(row.get<HStr>('dis')?.value)}</TableCell>
                        <TableCell align="right">{row.get<HVal>('curVal')?.toString()}</TableCell>
                      </TableRow>
                    )
                  }
                )}
              </TableBody>
            </Table>
          </TableContainer>
        </Container>
      </ClientContext.Provider>
    </div>
  );
}

export default App;

Thanks for your help.

[quentinbinotcarrier]

I also tried to override the fetch by what I think is the standard implementation. But it does not seems to do the trick.

const client = new Client({
  base: new URL("http://localhost:8084"),
  fetch: fetch
})

[quentinbinotcarrier]

Apparently only the useWatch method has this behavior.

[mikeMelillo]

Was a solution ever found for this? There's no clear way to create a client instance for a non-fin host. Just using native SkySpark and finStackAuth keeps showing up as part of the request & get a Error: Cannot acquire attest key

import logo from "./logo.svg";
import "./App.css";

import React from "react";

import { defs, HDict, HRef, HStr, HVal } from "haystack-core";
import { Client } from "haystack-nclient";
import { ClientContext, useWatch } from "haystack-react";

const client = new Client({
  base: new URL("http://localhost:8080"),
  project: "homeBrew",
  fetch: fetch,
});

function App() {
  const { grid, isLoading, error } = useWatch({
    filter: "point and curVal",
    pollRate: 1,
  });

  if (isLoading) {
    return <h1>Loading...</h1>;
  }

  if (error) {
    return <h1>Error: {error.message}</h1>;
  }

  return (
    <div className="App">
      <ClientContext.Provider value={client}>
        <div>Testing...</div>
      </ClientContext.Provider>
    </div>
  );
}

export default App;