Tur Comments - Answer Overflow

Tur

•Created by Silverdagger on 8/29/2023 in #support

How can I populate HTML on the server with db data before sending it to the client

For example

const [responseData] = createResource(params.itemID, async () => await fetchFromAPI(getURL(), handleResponseError));
//...
 createEffect((done) => {
    if (!done && !responseData.loading) {
      // catch responseData() here 
      return true;
    }
  });

const [responseData] = createResource(params.itemID, async () => await fetchFromAPI(getURL(), handleResponseError));
//...
 createEffect((done) => {
    if (!done && !responseData.loading) {
      // catch responseData() here 
      return true;
    }
  });

Or you can just handle responseData within JSX because JSX is an Effect itself

38 replies

SSolidJS

•Created by Silverdagger on 8/29/2023 in #support

How can I populate HTML on the server with db data before sending it to the client

I haven't touched SolidStart but it seems that the problem is in that createResource is asyncronous and you need to put the result to createEffect to catch the result once it has come

38 replies

SSolidJS

•Created by Tur on 6/22/2023 in #support

Maximum call stack size exceeded while using createEffect

Thanks for the answer! But why does changing the store trigger createResource when it must be triggered by changing of params.itemID?

14 replies

SSolidJS

•Created by Tur on 6/22/2023 in #support

Maximum call stack size exceeded while using createEffect

The thing is in that create effect expects getting true from inner func to stop triggering

14 replies

SSolidJS

•Created by Tur on 6/22/2023 in #support

Maximum call stack size exceeded while using createEffect

Thanks to @lexlohr this code works

createEffect((done) => {
    if (!done && !userData.loading) {
      Object.keys(formValues).forEach((key) => {
        setFormValues({ ...formValues, [key]: { ...formValues[key], value: userData()[key] } });
      });
      return true;
    } else if (userData.error) {
      if (userData.error.response.status === 401) {
        navigate(`/auth/login?next=${thisLocation}`);
      }
    }
  });

createEffect((done) => {
    if (!done && !userData.loading) {
      Object.keys(formValues).forEach((key) => {
        setFormValues({ ...formValues, [key]: { ...formValues[key], value: userData()[key] } });
      });
      return true;
    } else if (userData.error) {
      if (userData.error.response.status === 401) {
        navigate(`/auth/login?next=${thisLocation}`);
      }
    }
  });

14 replies

SSolidJS

•Created by Tur on 6/22/2023 in #support

Maximum call stack size exceeded while using createEffect

I used to use other approach to solve this task and it works well but it is not idiomatic:

nMount(async () => {
      const url = `${import.meta.env.HIN_SERVER_API_ROOT}/users/${params.itemID}`;
      try {
        const responseData = await fetchFromAPI(url);
        Object.keys(formValues).forEach((key) => {
          setFormValues({ ...formValues, [key]: { ...formValues[key], value: responseData[key] } });
        });
      } catch (error) {
        if (error.response.status === 401) {
          navigate(`/auth/login?next=${thisLocation}`);
        }
      }
    });

nMount(async () => {
      const url = `${import.meta.env.HIN_SERVER_API_ROOT}/users/${params.itemID}`;
      try {
        const responseData = await fetchFromAPI(url);
        Object.keys(formValues).forEach((key) => {
          setFormValues({ ...formValues, [key]: { ...formValues[key], value: responseData[key] } });
        });
      } catch (error) {
        if (error.response.status === 401) {
          navigate(`/auth/login?next=${thisLocation}`);
        }
      }
    });

Why does using createEffect here lead to infinite cycle?

14 replies

SSolidJS

•Created by Tur on 6/18/2023 in #support

Unexpected token in testing render method

I'm a beginer in frontend testing so smoother is still not my case 🙂 But I'm keen on TDD and love testing backend in Python. I hope I manage to include TDD approach to my Solid js projects/

45 replies

SSolidJS

•Created by Tur on 6/18/2023 in #support

Unexpected token in testing render method

Thank you! It works!

45 replies

SSolidJS

•Created by Tur on 6/18/2023 in #support

Unexpected token in testing render method

But there is still the problem with Wrapping up the App with Router

45 replies

SSolidJS

•Created by Tur on 6/18/2023 in #support

Unexpected token in testing render method

It solved the problem with multiple instances of solid!

45 replies

SSolidJS

•Created by Tur on 6/18/2023 in #support

Unexpected token in testing render method

Wait

45 replies

SSolidJS

•Created by Tur on 6/18/2023 in #support

Unexpected token in testing render method

///<reference types="vitest" />
/// <reference types="vite/client" />
// 👆 do not forget to add the references above

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import devtools from 'solid-devtools/vite';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
  plugins: [devtools(), solidPlugin(), eslintPlugin()],
  server: {
    port: 3000,
  },
  build: {
    target: 'esnext',
  },
  test: {
    environment: 'jsdom',
    globals: true,
    transformMode: { web: [/\.[jt]sx?$/] },
    deps: {
      inline: [/solid-js/, /@solidjs/],
    },
  },
  envDir: '.envs',
  envPrefix: 'HIN_',
});

///<reference types="vitest" />
/// <reference types="vite/client" />
// 👆 do not forget to add the references above

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import devtools from 'solid-devtools/vite';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
  plugins: [devtools(), solidPlugin(), eslintPlugin()],
  server: {
    port: 3000,
  },
  build: {
    target: 'esnext',
  },
  test: {
    environment: 'jsdom',
    globals: true,
    transformMode: { web: [/\.[jt]sx?$/] },
    deps: {
      inline: [/solid-js/, /@solidjs/],
    },
  },
  envDir: '.envs',
  envPrefix: 'HIN_',
});

Like this? It's not working

45 replies

SSolidJS

•Created by Tur on 6/18/2023 in #support

Unexpected token in testing render method

/* @refresh reload */
// eslint-disable-next-line import/named
import { render } from 'solid-js/web';
// import 'material-icons/iconfont/material-icons.css';
import 'solid-devtools';
import { Router } from '@solidjs/router';

import './index.css';
import App from './App';

render(
  () => (
    <Router>
      <App />
    </Router>
  ),
  document.getElementById('root'),
);

/* @refresh reload */
// eslint-disable-next-line import/named
import { render } from 'solid-js/web';
// import 'material-icons/iconfont/material-icons.css';
import 'solid-devtools';
import { Router } from '@solidjs/router';

import './index.css';
import App from './App';

render(
  () => (
    <Router>
      <App />
    </Router>
  ),
  document.getElementById('root'),
);

45 replies

SSolidJS

•Created by Tur on 6/18/2023 in #support

Unexpected token in testing render method

Why did it decided I have 2 instaces of solid and how to tell it that my App is actually wrapped by Router?

45 replies

SSolidJS

•Created by Tur on 6/18/2023 in #support

Unexpected token in testing render method

45 replies

SSolidJS

•Created by Tur on 6/18/2023 in #support

Unexpected token in testing render method

//<reference types="vitest" />
/// <reference types="vite/client" />
// :point_up_2: do not forget to add the references above

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import devtools from 'solid-devtools/vite';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
  plugins: [devtools(), solidPlugin(), eslintPlugin()],
  server: {
    port: 3000,
  },
  build: {
    target: 'esnext',
  },
  test: {
    environment: 'jsdom',
    globals: true,
    transformMode: { web: [/\.[jt]sx?$/] },
  },
  envDir: '.envs',
  envPrefix: 'HIN_',
});

//<reference types="vitest" />
/// <reference types="vite/client" />
// :point_up_2: do not forget to add the references above

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import devtools from 'solid-devtools/vite';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
  plugins: [devtools(), solidPlugin(), eslintPlugin()],
  server: {
    port: 3000,
  },
  build: {
    target: 'esnext',
  },
  test: {
    environment: 'jsdom',
    globals: true,
    transformMode: { web: [/\.[jt]sx?$/] },
  },
  envDir: '.envs',
  envPrefix: 'HIN_',
});