S
SolidJS•11mo ago
Zanoryt

How can I access a store from the parent context from inside of a nested context?

I am trying to access the WebsocketContext from inside of the DataStreamContext, in order to send out a websocket message when a DataStreamContext function is called. I can't seem to figure out the right way to do this. Provider structure: 
    <Html lang="en">
      <Head>
        <Title>Airframes</Title>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <Body>
        <Suspense>
          <ErrorBoundary>
            <WebsocketProvider>
              <DataStreamProvider>
                <Routes>
                  <FileRoutes />
                </Routes>
              </DataStreamProvider>
            </WebsocketProvider>
          </ErrorBoundary>
        </Suspense>
        <Scripts />
      </Body>
    </Html>
    <Html lang="en">
      <Head>
        <Title>Airframes</Title>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <Body>
        <Suspense>
          <ErrorBoundary>
            <WebsocketProvider>
              <DataStreamProvider>
                <Routes>
                  <FileRoutes />
                </Routes>
              </DataStreamProvider>
            </WebsocketProvider>
          </ErrorBoundary>
        </Suspense>
        <Scripts />
      </Body>
    </Html>
22 Replies
foxpro 🐍
foxpro 🐍•11mo ago
Seems like you need to compose this two contexts into single one
thetarnav
thetarnav•11mo ago
I can't seem to figure out the right way to do this.
You can access context in the same way you do in the routes. If it is below the provider it will be available, you just need a reference to WebsocketCtx
foxpro 🐍
foxpro 🐍•11mo ago
Seems he is asking how to access DataStream Context from Websocket Context, that is reverse order
thetarnav
thetarnav•11mo ago
I am trying to access the WebsocketContext from inside of the DataStreamContext
🤔 if it’s the other way around then just reverse them 🤷‍♂️
foxpro 🐍
foxpro 🐍•11mo ago
It's circular dependencies probably
Zanoryt
Zanoryt•11mo ago
I am trying to access the websocket from inside the datastream it builds on top of it Got it, so I just need to add a useContext inside of that context? 
import { Socket, io } from "socket.io-client";
import { createContext, useContext } from "solid-js";
import { createStore } from "solid-js/store";

export const makeWebsocketContext = () => {
  const [state, setState] = createStore({
    socket: null as Socket | null,
    connected: false,
    error: null,
  });
  return [state, {
    connect: () => {
      console.log("WS: connecting");
      const socket = io("http://localhost:3001", { transports: ["websocket"] });
      setState('socket', socket);
      state.socket?.connected && setState('connected', true);
    },
    disconnect: () => {
      console.log("WS: disconnecting");
      state.socket?.disconnect();
      setState('socket', null);
      setState('connected', false);
    }
  }] as const;
};
export type WebsocketContextType = ReturnType<typeof makeWebsocketContext>;
export const WebsocketContext = createContext<WebsocketContextType>();

export const WebsocketProvider = (props: any) => {
  const websocket = makeWebsocketContext();

  return (
    <WebsocketContext.Provider value={websocket}>
      {props.children}
    </WebsocketContext.Provider>
  );
}

export const useWebsocket = () => { return useContext(WebsocketContext); }
import { Socket, io } from "socket.io-client";
import { createContext, useContext } from "solid-js";
import { createStore } from "solid-js/store";

export const makeWebsocketContext = () => {
  const [state, setState] = createStore({
    socket: null as Socket | null,
    connected: false,
    error: null,
  });
  return [state, {
    connect: () => {
      console.log("WS: connecting");
      const socket = io("http://localhost:3001", { transports: ["websocket"] });
      setState('socket', socket);
      state.socket?.connected && setState('connected', true);
    },
    disconnect: () => {
      console.log("WS: disconnecting");
      state.socket?.disconnect();
      setState('socket', null);
      setState('connected', false);
    }
  }] as const;
};
export type WebsocketContextType = ReturnType<typeof makeWebsocketContext>;
export const WebsocketContext = createContext<WebsocketContextType>();

export const WebsocketProvider = (props: any) => {
  const websocket = makeWebsocketContext();

  return (
    <WebsocketContext.Provider value={websocket}>
      {props.children}
    </WebsocketContext.Provider>
  );
}

export const useWebsocket = () => { return useContext(WebsocketContext); }
import { createContext, useContext } from "solid-js";
import { createStore } from "solid-js/store";

export const makeDataStreamContext = (props: any) => {
  const [state, setState] = createStore({
    favoriteStationIds: [15150280, 705556],
    stationsToMonitor: [] as number[],
    stations: [] as any[],
    stationData: {} as any,
  });
  return [state, {
    addStationToMonitor: (stationId: number) => {
      setState('stationsToMonitor', [...state.stationsToMonitor, stationId]);
      console.log(props);
      props.state.socket.emit("station:monitor:start", stationId);
    },
    removeStationToMonitor: (stationId: number) => {
      setState('stationsToMonitor', state.stationsToMonitor.filter((id: number) => id !== stationId));
    }
  }] as const;
}
export type DataStreamContextType = ReturnType<typeof makeDataStreamContext>;
export const DataStreamContext = createContext<DataStreamContextType>();

export const DataStreamProvider = (props: any) => {
  const dataStream = makeDataStreamContext(props);

  return (
    <DataStreamContext.Provider value={dataStream}>
      {props.children}
    </DataStreamContext.Provider>
  );
}

export const useDataStream = () => { return useContext(DataStreamContext); }
import { createContext, useContext } from "solid-js";
import { createStore } from "solid-js/store";

export const makeDataStreamContext = (props: any) => {
  const [state, setState] = createStore({
    favoriteStationIds: [15150280, 705556],
    stationsToMonitor: [] as number[],
    stations: [] as any[],
    stationData: {} as any,
  });
  return [state, {
    addStationToMonitor: (stationId: number) => {
      setState('stationsToMonitor', [...state.stationsToMonitor, stationId]);
      console.log(props);
      props.state.socket.emit("station:monitor:start", stationId);
    },
    removeStationToMonitor: (stationId: number) => {
      setState('stationsToMonitor', state.stationsToMonitor.filter((id: number) => id !== stationId));
    }
  }] as const;
}
export type DataStreamContextType = ReturnType<typeof makeDataStreamContext>;
export const DataStreamContext = createContext<DataStreamContextType>();

export const DataStreamProvider = (props: any) => {
  const dataStream = makeDataStreamContext(props);

  return (
    <DataStreamContext.Provider value={dataStream}>
      {props.children}
    </DataStreamContext.Provider>
  );
}

export const useDataStream = () => { return useContext(DataStreamContext); }
so instead of my incorrect props.state.socket.emit() here, I could access it via useContext() right?
REEEEE
REEEEE•11mo ago
Yes
Zanoryt
Zanoryt•11mo ago
Ok, let me give that a shot. Hmmmm 
import { createContext, useContext } from "solid-js";
import { createStore } from "solid-js/store";
import { useWebsocket } from "./Websocket";

export const makeDataStreamContext = () => {
  const [_, websocket]: any = useWebsocket();
  const [state, setState] = createStore({
    favoriteStationIds: [15150280, 705556],
    stationsToMonitor: [] as number[],
    stations: [] as any[],
    stationData: {} as any,
  });
  return [state, {
    addStationToMonitor: (stationId: number) => {
      setState('stationsToMonitor', [...state.stationsToMonitor, stationId]);
      websocket.socket.emit("station:monitor:start", stationId);
    },
    removeStationToMonitor: (stationId: number) => {
      setState('stationsToMonitor', state.stationsToMonitor.filter((id: number) => id !== stationId));
    }
  }] as const;
}
export type DataStreamContextType = ReturnType<typeof makeDataStreamContext>;
export const DataStreamContext = createContext<DataStreamContextType>();

export const DataStreamProvider = (props: any) => {
  const dataStream = makeDataStreamContext();

  return (
    <DataStreamContext.Provider value={dataStream}>
      {props.children}
    </DataStreamContext.Provider>
  );
}

export const useDataStream = () => { return useContext(DataStreamContext); }
import { createContext, useContext } from "solid-js";
import { createStore } from "solid-js/store";
import { useWebsocket } from "./Websocket";

export const makeDataStreamContext = () => {
  const [_, websocket]: any = useWebsocket();
  const [state, setState] = createStore({
    favoriteStationIds: [15150280, 705556],
    stationsToMonitor: [] as number[],
    stations: [] as any[],
    stationData: {} as any,
  });
  return [state, {
    addStationToMonitor: (stationId: number) => {
      setState('stationsToMonitor', [...state.stationsToMonitor, stationId]);
      websocket.socket.emit("station:monitor:start", stationId);
    },
    removeStationToMonitor: (stationId: number) => {
      setState('stationsToMonitor', state.stationsToMonitor.filter((id: number) => id !== stationId));
    }
  }] as const;
}
export type DataStreamContextType = ReturnType<typeof makeDataStreamContext>;
export const DataStreamContext = createContext<DataStreamContextType>();

export const DataStreamProvider = (props: any) => {
  const dataStream = makeDataStreamContext();

  return (
    <DataStreamContext.Provider value={dataStream}>
      {props.children}
    </DataStreamContext.Provider>
  );
}

export const useDataStream = () => { return useContext(DataStreamContext); }
websocket is undefined here inside of calling addStationToMonitor() and it doesn't seem to make sense to put the context into the state for this other context.
REEEEE
REEEEE•11mo ago
you probably want 
 const [websocket]: any = useWebsocket();
 const [websocket]: any = useWebsocket();
Zanoryt
Zanoryt•11mo ago
no i return two items
REEEEE
REEEEE•11mo ago
since your websocket state is in the first index
Zanoryt
Zanoryt•11mo ago
yeah
REEEEE
REEEEE•11mo ago
yes, but if you want to access socket.emit, that's in your state
REEEEE
REEEEE•11mo ago
Zanoryt
Zanoryt•11mo ago
i have it in websocket (second item) ohh right, the second item is the functions Fantastic, that worked
REEEEE
REEEEE•11mo ago
nice
Zanoryt
Zanoryt•11mo ago
One more issue. Trying to call socket.on() from inside of the DataStreamContext, but of course at time of initialization the socket does not yet exist. Is there some way to do this so that it can register those once the socket exists?
REEEEE
REEEEE•11mo ago
you could use a createEffect 
let initialized = false
createEffect(on(() => websocket.socket, (socket) => {
  if(initialized) return;

  if(socket){
    initialized = true
    socket.on(....)
  }
}))
let initialized = false
createEffect(on(() => websocket.socket, (socket) => {
  if(initialized) return;

  if(socket){
    initialized = true
    socket.on(....)
  }
}))
if you only want it to run once the socket is available you can have the initialized variable like I used there
Zanoryt
Zanoryt•11mo ago
oooooooh elegant let me give it a shot It works! Incredible. 
import { createContext, createEffect, on, useContext } from "solid-js";
import { createStore } from "solid-js/store";
import { useWebsocket } from "./Websocket";

export const makeDataStreamContext = () => {
  let intialized = false;
  const [state, setState] = createStore({
    favoriteStationIds: [15150280, 705556],
    stationsToMonitor: [] as number[],
    stations: [] as any[],
    stationData: {} as any,
  });

  const [websocketState, _websocket]: any = useWebsocket();
  createEffect(on(() => websocketState.socket, (socket: any) => {
    if (intialized) return;

    if (socket) {
      intialized = true;
      socket.on("station:monitor:data", (data: any) => {
        console.log("DS: station:monitor:data", data);
      });
      socket.on("station:monitor:started", (data: any) => {
        console.log("DS: station:monitor:started", data);
        if (state.stations.filter((station) => station.id === data.station.id).length === 0) {
          setState("stations", [...state.stations, { id: data.station.id, ident: data.station.ident, monitoring: true, messages: [] }]);
          // if (stationIdSelected == data.stationId) setStore("stationSelected", data.station);
          console.log(`DS: Browser ${data.browserId}: Started monitoring station ${data.station.id}`)
        }
      });
    }
  }));

  return [state, {
    addStationToMonitor: (stationId: number) => {
      setState('stationsToMonitor', [...state.stationsToMonitor, stationId]);
      websocketState.socket.emit("station:monitor:start", stationId);
    },
    removeStationToMonitor: (stationId: number) => {
      setState('stationsToMonitor', state.stationsToMonitor.filter((id: number) => id !== stationId));
      websocketState.socket.emit("station:monitor:stop", stationId);
    }
  }] as const;
}
export type DataStreamContextType = ReturnType<typeof makeDataStreamContext>;
export const DataStreamContext = createContext<DataStreamContextType>();

export const DataStreamProvider = (props: any) => {
  const dataStream = makeDataStreamContext();

  return (
    <DataStreamContext.Provider value={dataStream}>
      {props.children}
    </DataStreamContext.Provider>
  );
}

export const useDataStream = () => { return useContext(DataStreamContext); }
import { createContext, createEffect, on, useContext } from "solid-js";
import { createStore } from "solid-js/store";
import { useWebsocket } from "./Websocket";

export const makeDataStreamContext = () => {
  let intialized = false;
  const [state, setState] = createStore({
    favoriteStationIds: [15150280, 705556],
    stationsToMonitor: [] as number[],
    stations: [] as any[],
    stationData: {} as any,
  });

  const [websocketState, _websocket]: any = useWebsocket();
  createEffect(on(() => websocketState.socket, (socket: any) => {
    if (intialized) return;

    if (socket) {
      intialized = true;
      socket.on("station:monitor:data", (data: any) => {
        console.log("DS: station:monitor:data", data);
      });
      socket.on("station:monitor:started", (data: any) => {
        console.log("DS: station:monitor:started", data);
        if (state.stations.filter((station) => station.id === data.station.id).length === 0) {
          setState("stations", [...state.stations, { id: data.station.id, ident: data.station.ident, monitoring: true, messages: [] }]);
          // if (stationIdSelected == data.stationId) setStore("stationSelected", data.station);
          console.log(`DS: Browser ${data.browserId}: Started monitoring station ${data.station.id}`)
        }
      });
    }
  }));

  return [state, {
    addStationToMonitor: (stationId: number) => {
      setState('stationsToMonitor', [...state.stationsToMonitor, stationId]);
      websocketState.socket.emit("station:monitor:start", stationId);
    },
    removeStationToMonitor: (stationId: number) => {
      setState('stationsToMonitor', state.stationsToMonitor.filter((id: number) => id !== stationId));
      websocketState.socket.emit("station:monitor:stop", stationId);
    }
  }] as const;
}
export type DataStreamContextType = ReturnType<typeof makeDataStreamContext>;
export const DataStreamContext = createContext<DataStreamContextType>();

export const DataStreamProvider = (props: any) => {
  const dataStream = makeDataStreamContext();

  return (
    <DataStreamContext.Provider value={dataStream}>
      {props.children}
    </DataStreamContext.Provider>
  );
}

export const useDataStream = () => { return useContext(DataStreamContext); }
REEEEE
REEEEE•11mo ago
nice!
Zanoryt
Zanoryt•11mo ago
This has really extracted out some functionality nicely. I'm impressed.
Zanoryt
Zanoryt•11mo ago
Looking sharp. Thanks for the help.
Want results from more Discord servers?
Add your server
More Posts
Using `createResource` without triggering suspenseI'm trying to use `createResource` without triggering Suspense. I realised that `data.latest` still `<A>` from `solid-start` is slow on Android. How to debug performance?So, on my detail page I have a button ```jsx import { A } from 'solid-start'; const Detail = () =>Warning on a reactive variable using TSXI don't know why I get this warning since everything works just a fine as I wanted, unless their migstore values do not updatehave this store: https://github.com/learn-anything/learn-anything/blob/main/app/packages/electron-weHow to add derived values in store after creationHey folks 👋 I'm trying to add a derived value after the creation of a store. Like the getter examTransition state getting lost after an await inside ResourceFetcherhttps://playground.solidjs.com/anonymous/c2f53a7d-9e76-4711-8e81-aa6bc2de12c6 Check the above link tIssue with multiple useTransitionhttps://playground.solidjs.com/anonymous/ad274a3f-5cd0-4fa2-a852-c64bde3cdb77 Use the above playgroTrouble porting a React hook to SolidI'm trying to port the usePlaidLink hook to Solid. But after making some adjustments from the React Signal Factories and eslint warningsI've created a factory for creating signals from a yjs document. Everything seems work ok, but the lHow to handle Reactivity for nested objects?I have a tree structure which i want to render and have reactive to changes. The tree is in its own