1_N_E=(window.webpackJsonp_N_E=window.webpackJsonp_N_E||[]).push([[39],{"2OYR":function(e,t,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/guides/query-keys",function(){return a("O7hS")}])},O7hS:function(e,t,a){"use strict";a.r(t),a.d(t,"meta",(function(){return c})),a.d(t,"default",(function(){return y}));var n=a("wx14"),r=a("Ff2n"),s=a("q1tI"),i=a.n(s),o=a("7ljp"),u=a("er9C"),c=(i.a.createElement,{id:"query-keys",title:"Query Keys"}),l={meta:c},b=function(e){var t=e.children,a=Object(r.a)(e,["children"]);return Object(o.b)(u.a,Object(n.a)({meta:c},a),t)};function y(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(o.b)(b,Object(n.a)({},l,a,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"At its core, Svelte Query manages query caching for you based on query keys. Query keys can be as simple as a string, or as complex as an array of many strings and nested objects. As long as the query key is serializable, and ",Object(o.b)("strong",{parentName:"p"},"unique to the query's data"),", you can use it!"),Object(o.b)("h3",{id:"string-only-query-keys"},"String-Only Query Keys",Object(o.b)("a",Object(n.a)({parentName:"h3"},{href:"#string-only-query-keys",title:"Direct link to heading",className:"anchor"}),Object(o.b)("span",Object(n.a)({parentName:"a"},{className:"icon icon-link"})))),Object(o.b)("p",null,"The simplest form of a key is actually not an array, but an individual string. When a string query key is passed, it is converted to an array internally with the string as the only item in the query key. This format is useful for:"),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},"Generic List/Index resources"),Object(o.b)("li",{parentName:"ul"},"Non-hierarchical resources")),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-js"}),"// A list of todos\nuseQuery('todos', ...) // queryKey === ['todos']\n\n// Something else, whatever!\nuseQuery('somethingSpecial', ...) // queryKey === ['somethingSpecial']\n")),Object(o.b)("h3",{id:"array-keys"},"Array Keys",Object(o.b)("a",Object(n.a)({parentName:"h3"},{href:"#array-keys",title:"Direct link to heading",className:"anchor"}),Object(o.b)("span",Object(n.a)({parentName:"a"},{className:"icon icon-link"})))),Object(o.b)("p",null,"When a query needs more information to uniquely describe its data, you can use an array with a string and any number of serializable objects to describe it. This is useful for:"),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},"Hierarchical or nested resources",Object(o.b)("ul",{parentName:"li"},Object(o.b)("li",{parentName:"ul"},"It's common to pass an ID, index, or other primitive to uniquely identify the item"))),Object(o.b)("li",{parentName:"ul"},"Queries with additional parameters",Object(o.b)("ul",{parentName:"li"},Object(o.b)("li",{parentName:"ul"},"It's common to pass an object of additional options")))),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-js"}),"// An individual todo\nuseQuery(['todo', 5], ...)\n// queryKey === ['todo', 5]\n\n// And individual todo in a \"preview\" format\nuseQuery(['todo', 5, { preview: true }], ...)\n// queryKey === ['todo', 5, { preview: true }]\n\n// A list of todos that are \"done\"\nuseQuery(['todos', { type: 'done' }], ...)\n// queryKey === ['todos', { type: 'done' }]\n")),Object(o.b)("h3",{id:"query-keys-are-hashed-deterministically"},"Query Keys are hashed deterministically!",Object(o.b)("a",Object(n.a)({parentName:"h3"},{href:"#query-keys-are-hashed-deterministically",title:"Direct link to heading",className:"anchor"}),Object(o.b)("span",Object(n.a)({parentName:"a"},{className:"icon icon-link"})))),Object(o.b)("p",null,"This means that no matter the order of keys in objects, all of the following queries are considered equal:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-js"}),"useQuery(['todos', { status, page }], ...)\nuseQuery(['todos', { page, status }], ...)\nuseQuery(['todos', { page, status, other: undefined }], ...)\n")),Object(o.b)("p",null,"The following query keys, however, are not equal. Array item order matters!"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-js"}),"useQuery(['todos', status, page], ...)\nuseQuery(['todos', page, status], ...)\nuseQuery(['todos', undefined, page, status], ...)\n")),Object(o.b)("h2",{id:"if-your-query-function-depends-on-a-variable-include-it-in-your-query-key"},"If your query function depends on a variable, include it in your query key",Object(o.b)("a",Object(n.a)({parentName:"h2"},{href:"#if-your-query-function-depends-on-a-variable-include-it-in-your-query-key",title:"Direct link to heading",className:"anchor"}),Object(o.b)("span",Object(n.a)({parentName:"a"},{className:"icon icon-link"})))),Object(o.b)("p",null,"Since query keys uniquely describe the data they are fetching, they should include any variables you use in your query function that ",Object(o.b)("strong",{parentName:"p"},"change"),". For example:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-js"}),"const queryResult = useQuery(['todos', todoId], () => fetchTodoById(todoId))\n")))}y.isMDXComponent=!0}},[["2OYR",0,2,1,3,4]]]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.