SolidJS•3y ago•

3 replies

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

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

onMount()

to the run

fetchTodos()

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

createResource

for data fetching, but there's a problem.

1. The app loads and

createResource

createResource

runs

fetchTodos

fetchTodos

.
2.

fetchTodos

fetchTodos

queries the API and uses the

setTodos

setTodos

setter to populate

todos

todos

.
3.

fetchTodos

fetchTodos

returns

response.data

response.data

, which populates

todosCollection

todosCollection

but

todosCollection is redundant because it never gets used.

So what's the right way to do this in Solid?

- Should I use

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

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

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

onMount()

to the run

fetchTodos()

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

// 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

createResource

for data fetching, but there's a problem.

1. The app loads and

createResource

createResource

runs

fetchTodos

fetchTodos

.
2.

fetchTodos

fetchTodos

queries the API and uses the

setTodos

setTodos

setter to populate

todos

todos

.
3.

fetchTodos

fetchTodos

returns

response.data

response.data

, which populates

todosCollection

todosCollection

but

todosCollection is redundant because it never gets used.

So what's the right way to do this in Solid?

- Should I use

todosCollection is redundant because it never gets used.

So what's the right way to do this in Solid?

- Should I use

Can I Populate A Store Using createResource()?

Can I Populate A Store Using createResource()?

Similar Threads

Similar Threads

Similar Threads