SolidJSS
SolidJS•3y ago•
3 replies
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();
}, []);


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);


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
Was this page helpful?