ardeora commented 2 weeks ago

While writing documentation for queryOptions in solid-query, I noticed the implementation of queryOptions API was incorrect.

In the current implementation. The queryOptions function would take in a function that would return an object of type QueryOptions. This is unnecessary and can be simplified by just taking in an object of type QueryOptions.

Current implementation:

import { queryOptions, createQuery, QueryClient } from '@tanstack/solid-query';

const client = new QueryClient();

const options = queryOptions(() => ({
  queryKey: ['key'],
  queryFn: async () => {
    return 'data';
  }
}));

const query = createQuery(options);
client.prefetchQuery(options());

There are a few issues with the current implementation:

The goal of the queryOptions function is to provide typesafety for certain QueryClient methods. In this current approach, there is no type inference on methods like getQueryData, setQueryData, fetchQuery, etc.

const options = queryOptions(() => ({
  queryKey: ['number'],
  queryFn: () => Promise.resolve(5),
}))

const a = client.getQueryData(options().queryKey)
//    ^? const a: unknown

Since these options will be used by the QueryClient methods, it would be better to have the options as an object instead of a function that returns an object.

Proposed implementation:

import { queryOptions, createQuery, QueryClient } from '@tanstack/solid-query';

const client = new QueryClient();

const options = queryOptions({
  queryKey: ['key'],
  queryFn: async () => {
    return 'data';
  }
});

const query = createQuery(() => options);
const a = client.getQueryData(options.queryKey);
//    ^? const a: string

vercel[bot] commented 2 weeks ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

nx-cloud[bot] commented 2 weeks ago

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 228e7ef49ce2ac7e597678d7037f10521a969d5a. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

✅ Successfully ran 1 target

- [`nx affected --targets=test:format,test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build,test:attw --parallel=3`](https://cloud.nx.app/runs/EEriiSDiyr?utm_source=pull-request&utm_medium=comment)

Sent with 💌 from NxCloud.

codesandbox-ci[bot] commented 2 weeks ago

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 228e7ef49ce2ac7e597678d7037f10521a969d5a:

Sandbox	Source
@tanstack/query-example-angular-basic	Configuration
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration

TanStack / query

feat(solid-query): Revise `queryOptions` implementation #7366

☁️ Nx Cloud Report