S
SolidJS•3y ago
ChrisThornham

Can I Populate A Store Using createResource()?

On the initial render of my app, I want to fetch data from an API using an async function. In React, I could use useEffect() for this. 
// create a getter and setter for my todos
const [todos, setTodos] = useState([]);

// get the todos.
async function fetchTodos() {
  const response = await axios.get('http://localhost:3002/todos');
  // update todos
  setTodos(response.data);
}

// use useEffect() to run fetchTodos on the initial render
useEffect(() => {
  fetchTodos();
}, []);
// create a getter and setter for my todos
const [todos, setTodos] = useState([]);

// get the todos.
async function fetchTodos() {
  const response = await axios.get('http://localhost:3002/todos');
  // update todos
  setTodos(response.data);
}

// use useEffect() to run fetchTodos on the initial render
useEffect(() => {
  fetchTodos();
}, []);
I'm trying to do the same thing with Solid and I'm confused because of how the docs read. My initial thought was I could use onMount() to the run fetchTodos() function but the docs state the following. "While onMount can be used to perform data fetching, it is best to use Solid's resources with createResource for that task." If I do that my code looks like this... 
// create a getter and setter my todos.
const [todos, setTodos] = createStore([]);

// get the todos
async function fetchTodos() {
  const response = await axios.get('http://localhost:3003/todos');
  // pass the response data to setTodos
  setTodos(response.data);
  // return the response to todosCollection
  return response.data;
}

// run createResource()
const [todosCollection] = createResource(fetchTodos);
// create a getter and setter my todos.
const [todos, setTodos] = createStore([]);

// get the todos
async function fetchTodos() {
  const response = await axios.get('http://localhost:3003/todos');
  // pass the response data to setTodos
  setTodos(response.data);
  // return the response to todosCollection
  return response.data;
}

// run createResource()
const [todosCollection] = createResource(fetchTodos);
In this code example, I'm following the docs by using createResource for data fetching, but there's a problem. 1. The app loads and createResource runs fetchTodos. 2. fetchTodos queries the API and uses the setTodos setter to populate todos. 3. fetchTodos returns response.data, which populates todosCollection but todosCollection is redundant because it never gets used. So what's the right way to do this in Solid? - Should I use onMount` in a case like this? - Am I trying to solve a Solid problem with a React mindset? Meaning, should I be using the reactive functions differently? Any help would be greatly appreciated. Thanks, Chris
2 Replies
deluksic
deluksic•3y ago
see https://www.solidjs.com/docs/latest/api#createresource and scroll to the bottom of that section. You will see an example of createDeepSignal using which you can use a store as a backing signal for the resource. if you plan to mutate it, use the mutate option of the resource
ChrisThornham
ChrisThornhamOP•3y ago
Thank you!

Did you find this page helpful?