SolidJS中如何用createResource实现响应式fetch对接GraphJS

核心误区说明 #

createResource 返回的第一个值是只读响应式信号，不是静态的请求结果值。Solid 内置的 <For> 组件本身处于响应式追踪上下文中，会自动读取信号的最新值触发更新，所以你在<For>里用的时候表现正常。但GraphJS属于非Solid生态的第三方库，本身没有接入Solid的响应式系统，如果你直接把信号、或者请求未完成时的初始值传给GraphJS，后续数据更新时GraphJS完全感知不到变化，自然不会正常渲染。

标准响应式fetch写法 #

用createResource做响应式请求是官方推荐的方案，支持依赖变化自动重发、加载/错误状态管理，基础写法如下：

import { createResource, createSignal } from 'solid-js';

// 定义请求函数，入参来自后续传入的响应式源
const fetchYourData = async (params) => {
  const response = await fetch(`/your/api/path?${new URLSearchParams(params)}`);
  if (!response.ok) throw new Error(`请求错误：${response.status}`);
  return response.json();
};

function BusinessComponent() {
  // 如果需要依赖参数变化自动重新拉取，就定义响应式参数源
  const [requestParams, setRequestParams] = createSignal({ page: 1, dataType: 'graph' });
  // 第一个参数传入响应式源，源的值变化时会自动触发重新请求
  // 如果不需要自动重发，第一个参数可以省略，组件挂载时仅请求一次
  const [remoteData, { refetch, loading, error }] = createResource(requestParams, fetchYourData);

  // remoteData() 读取当前值，loading() 读取加载状态，error() 读取错误信息
}

对接GraphJS的正确写法 #

因为GraphJS不会自动追踪Solid信号变化，必须通过createEffect手动建立更新关联，在数据变化时主动调用GraphJS的更新API：

import { createResource, createEffect, onMount } from 'solid-js';
import Graph from 'graph.js'; // 你引入的GraphJS库

function GraphContainer() {
  let containerEl;
  let graphInstance = null;
  // 你的数据拉取逻辑
  const [graphData] = createResource(async () => {
    const res = await fetch('/your/graph/data/api');
    return res.json();
  });

  // 组件挂载时初始化空的Graph实例
  onMount(() => {
    graphInstance = new Graph(containerEl, {
      nodes: [],
      edges: []
      // 其余你的Graph初始化配置
    });
  });

  // 响应式追踪数据变化，更新Graph
  createEffect(() => {
    const latestData = graphData();
    // 跳过实例未初始化、数据未加载完成的阶段
    if (!graphInstance || !latestData) return;
    // 调用GraphJS自身的更新方法，根据你用的版本API调整即可
    graphInstance.setData(latestData);
    graphInstance.render();
  });

  return <div ref={el => containerEl = el} class="graph-wrapper"></div>
}

常见踩坑点 #

• 读取createResource返回的数据必须加括号调用，比如remoteData()，直接传remoteData是把信号函数本身传过去，拿不到实际值
• 请求是异步的，初始状态下remoteData()返回undefined，必须做空值判断，避免给第三方库传空值报错
• 不要在一次性执行的逻辑（比如onMount初始化）里直接读取一次数据就传给GraphJS，这样只会拿到初始的undefined，后续数据更新不会同步
• 需要手动触发重新请求时，直接调用createResource返回的refetch()方法即可，不需要额外定义本地信号存数据手动赋值

内容的提问来源于stack exchange，提问作者erik