https://relay.dev/assets/js/164b3a5e.b8ae3ee8.js

1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([["1779"],{58318(e,n,s){s.r(n),s.d(n,{metadata:()=>t,default:()=>h,frontMatter:()=>l,contentTitle:()=>c,toc:()=>d,assets:()=>o});var t=JSON.parse('{"id":"api-reference/hooks/use-client-query","title":"useClientQuery","description":"API reference for useClientQuery, a React hook used to render client only queries","source":"@site/versioned_docs/version-v19.0.0/api-reference/hooks/use-client-query.md","sourceDirName":"api-reference/hooks","slug":"/api-reference/use-client-query/","permalink":"/docs/v19.0.0/api-reference/use-client-query/","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/relay/tree/main/website/versioned_docs/version-v19.0.0/api-reference/hooks/use-client-query.md","tags":[],"version":"v19.0.0","frontMatter":{"id":"use-client-query","title":"useClientQuery","slug":"/api-reference/use-client-query/","description":"API reference for useClientQuery, a React hook used to render client only queries","keywords":["query","read","client-query"]},"sidebar":"docs","previous":{"title":"useLazyLoadQuery","permalink":"/docs/v19.0.0/api-reference/use-lazy-load-query/"},"next":{"title":"useFragment","permalink":"/docs/v19.0.0/api-reference/use-fragment/"}}'),r=s(74848),i=s(28453),a=s(86898);let l={id:"use-client-query",title:"useClientQuery",slug:"/api-reference/use-client-query/",description:"API reference for useClientQuery, a React hook used to render client only queries",keywords:["query","read","client-query"]},c,o={},d=[{value:"Arguments",id:"arguments",level:3},{value:"Return Value",id:"return-value",level:3},{value:"Behavior",id:"behavior",level:3}];function u(e){let n={a:"a",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"useClientQuery"})," hook is used to render queries that read ",(0,r.jsx)(n.em,{children:"only"})," client fields."]}),"\n",(0,r.jsxs)(n.p,{children:["The Relay Compiler fully supports ",(0,r.jsx)(n.a,{href:"../../guides/client-schema-extensions/",children:"client-side extensions"})," of the schema, which allows you to define local fields and types."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-graphql",children:"# example client extension of the `Query` type\nextend type Query {\n  client_field: String\n}\n"})}),"\n",(0,r.jsxs)(n.p,{children:["These client-only fields are not sent to the server, and should be updated\nusing APIs for local updates, for example ",(0,r.jsx)(n.code,{children:"commitPayload"}),"."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"const React = require('React');\n\nconst {graphql, useClientQuery} = require('react-relay');\n\nfunction ClientQueryComponent() {\n  const data = useClientQuery(\n    graphql`\n      query ClientQueryComponentQuery {\n        client_field\n      }\n    `,\n    {}, // variables\n  );\n\n  return (\n    <div>{data.client_field}</div>\n  );\n}\n"})}),"\n",(0,r.jsx)(n.h3,{id:"arguments",children:"Arguments"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"query"}),": GraphQL query specified using a ",(0,r.jsx)(n.code,{children:"graphql"})," template literal."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"variables"}),": Object containing the variable values to fetch the query. These variables need to match GraphQL variables declared inside the query."]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"return-value",children:"Return Value"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"data"}),": Object that contains data which has been read out from the Relay store; the object matches the shape of specified query.","\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["The Flow type for data will also match this shape, and contain types derived from the GraphQL Schema. For example, the type of ",(0,r.jsx)(n.code,{children:"data"})," above is: ",(0,r.jsx)(n.code,{children:"{| user: ?{| name: ?string |} |}"}),"."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"behavior",children:"Behavior"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["This hooks works as ",(0,r.jsx)(n.a,{href:"../use-lazy-load-query",children:(0,r.jsx)(n.code,{children:"useLazyLoadQuery"})})," with ",(0,r.jsx)(n.code,{children:"fetchPolicy: store-only"}),", it does not send the network request."]}),"\n"]}),"\n",(0,r.jsx)(a.A,{})]})}function h(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},86898(e,n,s){s.d(n,{A:()=>x});var t=s(74848),r=s(95310),i=s(17352),a=s(96540);function l(){let e=window.encodeURI(JSON.stringify({title:"Feedback about "+window.location.pathname,description:"**!!! Required !!!**\n\nPlease modify the task description to let us know how the docs can be improved.\n\n**Please do not ask support questions via this form! Instead, ask in fburl.com/relay_

1support**",tag_ids:{add:[0xac96423e5b680,0x64079768ac750]}}));window.open("https://www.internalfb.com/tasks/?n="+e)}function c({children:e}){return(0,t.jsxs)("div",{className:"docsRating",id:"docsRating",children:[(0,t.jsx)("hr",{}),e]})}let o=()=>{let[e,n]=a.useState(!1),s=e=>{n(!0),window.ga&&window.ga("send",{hitType:"event",eventCategory:"button",eventAction:"feedback",eventValue:e})};return e?"Thank you for letting us know!":(0,t.jsxs)(t.Fragment,{children:["Is this page useful?",(0,t.jsx)("svg",{className:"i_thumbsup",alt:"Like",id:"docsRating-like",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 81.13 89.76",onClick:()=>s(1),children:(0,t.jsx)("path",{d:"M22.9 6a18.57 18.57 0 002.67 8.4 25.72 25.72 0 008.65 7.66c3.86 2 8.67 7.13 13.51 11 3.86 3.11 8.57 7.11 11.54 8.45s13.59.26 14.64 1.17c1.88 1.63 1.55 9-.11 15.25-1.61 5.86-5.96 10.55-6.48 16.86-.4 4.83-2.7 4.88-10.93 4.88h-1.35c-3.82 0-8.24 2.93-12.92 3.62a68 68 0 01-9.73.5c-3.57 0-7.86-.08-13.25-.08-3.56 0-4.71-1.83-4.71-4.48h8.42a3.51 3.51 0 000-7H12.28a2.89 2.89 0 01-2.88-2.88 1.91 1.91 0 01.77-1.78h16.46a3.51 3.51 0 000-7H12.29c-3.21 0-4.84-1.83-4.84-4a6.41 6.41 0 011.17-3.78h19.06a3.5 3.5 0 100-7H9.75A3.51 3.51 0 016 42.27a3.45 3.45 0 013.75-3.48h13.11c5.61 0 7.71-3 5.71-5.52-4.43-4.74-10.84-12.62-11-18.71-.15-6.51 2.6-7.83 5.36-8.56m0-6a6.18 6.18 0 00-1.53.2c-6.69 1.77-10 6.65-9.82 14.5.08 5.09 2.99 11.18 8.52 18.09H9.74a9.52 9.52 0 00-6.23 16.9 12.52 12.52 0 00-2.07 6.84 9.64 9.64 0 003.65 7.7 7.85 7.85 0 00-1.7 5.13 8.9 8.9 0 005.3 8.13 6 6 0 00-.26 1.76c0 6.37 4.2 10.48 10.71 10.48h13.25a73.75 73.75 0 0010.6-.56 35.89 35.89 0 007.58-2.18 17.83 17.83 0 014.48-1.34h1.35c4.69 0 7.79 0 10.5-1 3.85-1.44 6-4.59 6.41-9.38.2-2.46 1.42-4.85 2.84-7.62a41.3 41.3 0 003.42-8.13 48 48 0 001.59-10.79c.1-5.13-1-8.48-3.35-10.55-2.16-1.87-4.64-1.87-9.6-1.88a46.86 46.86 0 01-6.64-.29c-1.92-.94-5.72-4-8.51-6.3l-1.58-1.28c-1.6-1.3-3.27-2.79-4.87-4.23-3.33-3-6.47-5.79-9.61-7.45a20.2 20.2 0 01-6.43-5.53 12.44 12.44 0 01-1.72-5.36 6 6 0 00-6-5.86z"})}),(0,t.jsx)("svg",{className:"i_thumbsdown",alt:"Dislike",id:"docsRating-dislike",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 81.13 89.76",onClick:()=>s(0),children:(0,t.jsx)("path",{d:"M22.9 6a18.57 18.57 0 002.67 8.4 25.72 25.72 0 008.65 7.66c3.86 2 8.67 7.13 13.51 11 3.86 3.11 8.57 7.11 11.54 8.45s13.59.26 14.64 1.17c1.88 1.63 1.55 9-.11 15.25-1.61 5.86-5.96 10.55-6.48 16.86-.4 4.83-2.7 4.88-10.93 4.88h-1.35c-3.82 0-8.24 2.93-12.92 3.62a68 68 0 01-9.73.5c-3.57 0-7.86-.08-13.25-.08-3.56 0-4.71-1.83-4.71-4.48h8.42a3.51 3.51 0 000-7H12.28a2.89 2.89 0 01-2.88-2.88 1.91 1.91 0 01.77-1.78h16.46a3.51 3.51 0 000-7H12.29c-3.21 0-4.84-1.83-4.84-4a6.41 6.41 0 011.17-3.78h19.06a3.5 3.5 0 100-7H9.75A3.51 3.51 0 016 42.27a3.45 3.45 0 013.75-3.48h13.11c5.61 0 7.71-3 5.71-5.52-4.43-4.74-10.84-12.62-11-18.71-.15-6.51 2.6-7.83 5.36-8.56m0-6a6.18 6.18 0 00-1.53.2c-6.69 1.77-10 6.65-9.82 14.5.08 5.09 2.99 11.18 8.52 18.09H9.74a9.52 9.52 0 00-6.23 16.9 12.52 12.52 0 00-2.07 6.84 9.64 9.64 0 003.65 7.7 7.85 7.85 0 00-1.7 5.13 8.9 8.9 0 005.3 8.13 6 6 0 00-.26 1.76c0 6.37 4.2 10.48 10.71 10.48h13.25a73.75 73.75 0 0010.6-.56 35.89 35.89 0 007.58-2.18 17.83 17.83 0 014.48-1.34h1.35c4.69 0 7.79 0 10.5-1 3.85-1.44 6-4.59 6.41-9.38.2-2.46 1.42-4.85 2.84-7.62a41.3 41.3 0 003.42-8.13 48 48 0 001.59-10.79c.1-5.13-1-8.48-3.35-10.55-2.16-1.87-4.64-1.87-9.6-1.88a46.86 46.86 0 01-6.64-.29c-1.92-.94-5.72-4-8.51-6.3l-1.58-1.28c-1.6-1.3-3.27-2.79-4.87-4.23-3.33-3-6.47-5.79-9.61-7.45a20.2 20.2 0 01-6.43-5.53 12.44 12.44 0 01-1.72-5.36 6 6 0 00-6-5.86z"})})]})},d=()=>(0,t.jsxs)("p",{children:["Let us know how these docs can be improved by",(0,t.jsx)("a",{className:"button",role:"button",tabIndex:0,onClick:l,children:"Filing a task"})]}),u=()=>(0,t.jsxs)("p",{children:["Help us make the site even better by"," ",(0,t.jsx)(r.default,{to:"https://www.surveymonkey.com/r/FYC9TCJ",children:"answering a few quick questions"}),"."]}),h=()=>(0,t.jsxs)(c,{children:[(0,t.jsx)(d,{}),(0,t.jsx)(o,{}),(0,t.jsx)(u,{})]}),p=()=>(0,t.jsxs)(c,{children:[(0,t.jsx)(o,{}),(0,t.jsx)(u,{})]}),x=()=>(0,i.fbContent)({internal:(0,t.jsx)(h,{}),external:(0,t.jsx)(p,{})})},28453(e,n,s){s.d(n,{R:()=>a,x:()=>l});var t=s(96540);let r={},i=t.createContext(r);function a(e){let n=t.useContext(i);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),t.createElement(i.Provider,{value:n},e.children)}}}]);