Use `select` or return from inside query function?

We have an API that returns

{ metadata: Record<string, CustomType> }

{ metadata: Record<string, CustomType> }

. Often times we only want one of the returned

CustomType

CustomType

. The Record is of IDs to CustomType so when we pass in one ID, we only want one returned.

Should we be using the

select

select

function to return that one object or can we return it right inside the query function?

Using select:

const { data } = useQuery([queryKeys, objectID],
  async () => {
    const response = await APIRequest(objectID);
    return response.data
  }, 
  {
    enabled: !!objectID,
    select(data) => { 
      return data?.metadata?.[objectID]
    }
  }
)

const { data } = useQuery([queryKeys, objectID],
  async () => {
    const response = await APIRequest(objectID);
    return response.data
  }, 
  {
    enabled: !!objectID,
    select(data) => { 
      return data?.metadata?.[objectID]
    }
  }
)

or purely in the query function:

const { data } = useQuery([queryKeys, objectID],
  async () => {
    const response = await APIRequest(objectID);
    return response.data?.metadata?.[objectID]
  },
  {
    enabled: !!objectID,
  }
)

const { data } = useQuery([queryKeys, objectID],
  async () => {
    const response = await APIRequest(objectID);
    return response.data?.metadata?.[objectID]
  },
  {
    enabled: !!objectID,
  }
)

I thought I saw something that we needed to always return

response.data

response.data

useQuery

useQuery

could properly handle everything but now I'm not so sure.

We are sadly on v3 of react-query still...

TanStack•3y ago•

2 replies

uncertain-scarlet

Use `select` or return from inside query function?

We have an API that returns

{ metadata: Record<string, CustomType> }

{ metadata: Record<string, CustomType> }

. Often times we only want one of the returned

CustomType

CustomType

. The Record is of IDs to CustomType so when we pass in one ID, we only want one returned.

Should we be using the

select

select

function to return that one object or can we return it right inside the query function?

Using select:

const { data } = useQuery([queryKeys, objectID],
  async () => {
    const response = await APIRequest(objectID);
    return response.data
  }, 
  {
    enabled: !!objectID,
    select(data) => { 
      return data?.metadata?.[objectID]
    }
  }
)

const { data } = useQuery([queryKeys, objectID],
  async () => {
    const response = await APIRequest(objectID);
    return response.data
  }, 
  {
    enabled: !!objectID,
    select(data) => { 
      return data?.metadata?.[objectID]
    }
  }
)

or purely in the query function:

const { data } = useQuery([queryKeys, objectID],
  async () => {
    const response = await APIRequest(objectID);
    return response.data?.metadata?.[objectID]
  },
  {
    enabled: !!objectID,
  }
)

const { data } = useQuery([queryKeys, objectID],
  async () => {
    const response = await APIRequest(objectID);
    return response.data?.metadata?.[objectID]
  },
  {
    enabled: !!objectID,
  }
)

I thought I saw something that we needed to always return

response.data

response.data

useQuery

useQuery

could properly handle everything but now I'm not so sure.

We are sadly on v3 of react-query still...

Use `select` or return from inside query function?

Similar Threads

Use `select` or return from inside query function?

Similar Threads

Similar Threads

Similar Threads