介绍新的固体查询客户端-DEV365 开发者社区

我们很高兴地宣布，我们现在有官方的固体支持！ ð。这个新客户端建立在TanStack Solid Query之上，并将所有好东西从WunderGraph到Solid.js生态系统。查询，突变并订阅您的wundergraph api在solid.js中完全type.

该版本仍在beta中，我们正在寻找有关API的反馈以及它如何与solid.js一起使用。如果您有任何反馈，请通过打开issue on Github或与我们交谈directly on Discord。

。

让我们快速浏览如何设置它以及如何工作。

安装

安装实心查询客户端：

npm install @wundergraph/solid-query @tanstack/solid-query

配置

在使用挂钩之前，您需要修改代码生成以包括基本的打字稿客户端。

// wundergraph.config.ts
configureWunderGraphApplication({
  // ... omitted for brevity
  codeGenerators: [
    {
      templates: [templates.typescript.client],
      // the location where you want to generate the client
      path: '../src/generated',
    },
  ],
})

现在您可以配置钩子。创建一个新文件，例如src/lib/wundergraph.ts并添加以下代码：

import { createHooks } from '@wundergraph/solid-query'
import { createClient, Operations } from '../generated/client'

const client = createClient() // Typesafe WunderGraph client

export const {
  createQuery,
  createMutation,
  createSubscription,
  createFileUpload,
  useUser,
  useAuth,
  queryKey,
} = createHooks<Operations>(client)

查询

const weather = createQuery({
  operationName: 'Weather',
  input: {
    forCity: 'Berlin',
  },
})

weather.data

将查询变成实时查询，实时查询在Wundergraph Server上的间隔进行了挖掘。

const liveWeather = createQuery({
  operationName: 'Weather',
  input: {
    forCity: 'Berlin',
  },
  liveQuery: true,
})

突变

const mutation = createMutation({
  operationName: 'SetName',
})

mutation.mutate({ name: 'Eelco' })

// Async mutate
const result = await mutation.mutateAsync({ name: 'Eelco' })

无效的查询

假设我们有一个查询，可以在一个组件中获取当前用户的配置文件，并且我们的表单可以更新配置文件。我们可以将一个onSuccess处理程序添加到称为queryClient.invalidateQueries上的queryClient.invalidateQueries查询并触发Refacter并更新内部React查询缓存的突变中。

const Profile = () => {
  const query = createQuery({
    operationName: 'GetProfile',
  })

  return <div>{query.data?.getProfile.name}</div>
}

const FormComponent = () => {
  const queryClient = useQueryClient();

  const mutation = createMutation({
    operationName: 'UpdateProfile',
    onSuccess() {
      // invalidate the query
      queryClient.invalidateQueries(queryKey({ operationName: 'GetProfile' }));
    },
  })

  const onSubmit = (event) => {
    e.preventDefault();
    const data = new FormData(event.target);
    mutation.mutate(data)
  }

  return <form onSubmit={onSubmit}><input name="name" /><button type="submit">Save></button></form>
}

现在，我们甚至可以通过更新GetProfile缓存，然后再拆除它来使它完全乐观，看起来像这样：

const FormComponent = () => {
  const queryClient = useQueryClient()

  const mutation = createMutation({
    operationName: 'UpdateProfile',
    onMutate: async (data) => {
      const key = queryKey({ operationName: 'GetProfile' })
      // Cancel any outgoing refetches
      // (so they don't overwrite our optimistic update)
      await queryClient.cancelQueries(key)

      // Snapshot the previous value
      const previousProfile = queryClient.getQueryData<Profile>(key)

      // Optimistically update to the new value
      if (previousProfile) {
        queryClient.setQueryData<Profile>(key, {
          ...previousProfile,
          ...data,
        })
      }

      return { previousProfile }
    },
    // If the mutation fails,
    // use the context returned from onMutate to roll back
    onError: (err, variables, context) => {
      if (context?.previousProfile) {
        queryClient.setQueryData<Profile>(
          queryKey({ operationName: 'GetProfile' }),
          context.previousProfile
        )
      }
    },
    // Always refetch after error or success:
    onSettled: () => {
      queryClient.invalidateQueries(queryKey({ operationName: 'GetProfile' }))
    },
  })

  const onSubmit = (event) => {
    e.preventDefault()
    const data = new FormData(event.target)
    mutation.mutate(data)
  }

  return (
    <form onSubmit={onSubmit}>
      <input name="name" />
      <button type="submit">Save</button>
    </form>
  )
}

查看下面的参考和示例应用程序，以了解有关新的固体查询集成的更多信息。

资源

概括

您现在可以用solid.js利用wundergraph的力量，我们很高兴看到您将使用它构建的内容。

感谢Tanstack提供这个很棒的异步州管理库。我们将很快发布Svelte和Vue集成，请继续关注！

我们希望更多地了解您对solid.js的体验。您使用Vite还是稳定的开始？您喜欢什么？

在下面的评论中分享它，或在我们的Discord server上加入我们。